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.
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: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.