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: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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!