This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.
Already subscribed? Sign In
Vue's functional components are small and flexible enough to be declared inside of .vue file next to the main component. This allows you to mix jsx and Vue's templates so you have complete control over how to render your content.
Vue.js
Access all courses and lessons, track your progress, gain confidence and expertise.
Instructor: 00:00 Another great thing about these functional components is that they're so small and simple, you can basically write them in-line. I'm going to write a cats object here, which'll be functional true, and have a render with its H and props. Right now, we'll just render out a div, hello.
00:24 If I register cats with my components, then just drop my cats in instead of content, and make sure it lands in that content slot, you'll see I get a really tiny hello right there. What I'll do is I'll pass names in, and I'll create these names on my main component.
00:45 Just come in here, delete all this. I'll say the names are Mindy, John, Kim, Joel, and Ben. Then these names can flow through the props of the cats. We'll just go ahead and render them out. We'll say props.names.map.
01:08 Each name can map to a URL. I'll just write out a RoboHash here, slash-name, where the set is cats again. Then we'll map those URLs to image tags, where the source is set to the URL. Now, we have this sweet in-line component, where we have complete programmatic control over it using JavaScript, rendered out on our page.
01:37 Let's just add one more prop here on cats. We'll just say num, because we're going to pass in a number. Pass in the number one, and I'll swap out this set number with props.num. This will switch over to robots. Then I can change this to two. Now, it's aliens. Three is robot heads, and four is back to cats.
