Control Template Contents with Vue's Render Function
Declaring templates and elements inside of templates works great for most scenarios. Sometimes you need a bit more control over what your component will do with the props and children it receives, so Vue provides a render function that allows you complete programmatic control over every argument using JSX.
Instructor: [00:00] When you need more control than a functional template provides, I'll give an example using the content. I'll just create five divs, each with an image inside of them. The images are all going to be RoboHash images, so robohash.org.
[00:19] Then Mindy, and we want the cats. Set is set to set four. I'll just change some of these names, John, Kim, Joel, and Maggie. RoboHash has given us each of these images. I'm going to turn this div into a content component by going into my components, creating a new file called content.view.
[00:45] Make sure to export that. Export default as content from content. Then in my app, import content, and use it as a component. Then swap out this div for content. All the images disappear, because there is no slot, or a way to render those.
[01:09] Since we want to do it more programmatically, we're going to use a script this time. Because I'm not going to rely on data or the this keyword in JavaScript, I'm going to export an object instead of that class.
[01:22] I'll mark this as functional, and give it a render function, which takes the first argument as createElement, which is often aliased as H. Then the second argument is the context. The context has the props, the children, data, and anything that get passed into the render function.
[01:40] From here, I can just create a div. This is JSX, so the syntax is a bit different. I can take the context children, and the children is an array of virtual nodes. The curly brace says just evaluate what's inside of here, so it'll evaluate out all of the virtual nodes.
[01:59] Hit save, and then all of our cats will be back. I'm going to delete this and destructure context, just to get children off of there. Then because children is just an array of virtual DOM nodes, I can do any sort of array operation on it I want, like slice.
[02:18] Just give me the first two, hit save, and you'll probably be surprised to see just one cat there. That's because in my children, this white space after the div is considered a DOM node. Be careful when you do these sort of operations that you make sure to check that these exist.
[02:35] I'm going to filter out any node. I just want to make sure that node has a tag, because any of those white space ones are undefined, or have undefined tags. Now, you can see that we have two cats, because we're taking zero through two. The first one and the second one.
[02:53] Now, because we also get props here, we can make this configurable by, we'll say, bind the limit to three. Then in my content, I can say props.limit, hit save, and now you'll see one, two, three cats. In my app, if I were to change the limit to one, you would see one cat, or with a limit of four, you would see four cats.
[03:22] While I'm here, I'm going to grab this class, and move it over to this div to give that padding, and the taking up the rest of the space back. Because the flexibility we have with children now, you can do things like npm install lodash.
[03:41] Then I can import shuffle from lodash. Instead of slicing, I can just go ahead and shuffle these guys. Hit save there, and now, you'll see that we have all five cats. There it is, shuffled each time. You have the ultimate control with this array of children, which you can configure with props, and you can take the content you pass in, and change it however you want.