[Vue @Component] 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.

 

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: