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.
We have a parent component which renders:
<Content slot="content" :limit="4"> <div><img src="https://robohash.org/mindy?set=set4" alt=""></div> <div><img src="https://robohash.org/john?set=set4" alt=""></div> <div><img src="https://robohash.org/kim?set=set4" alt=""></div> <div><img src="https://robohash.org/joel?set=set4" alt=""></div> <div><img src="https://robohash.org/maggie?set=set4" alt=""></div> </Content>
Content.vue:
<script> import { shuffle } from "lodash" export default { functional: true, render: (createElement, { children, props, data }) => { if(props.limit) { return createElement('div', data, shuffle(children.slice(0, props.limit))); } else { return createElement('div', data, shuffle(children)); } } } </script>
You can also using JSX: