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

巴特西

[Vue @Component] Control Template Contents with Vue's Render Function

最新文章

热门文章