[Vue @Component] Control Template Contents with Vue's Render Function-优快云博客

本文探讨了VueJS中模板和元素的声明方式，并深入介绍了如何使用渲染函数和JSX来实现更精细的组件控制。通过一个具体示例，展示了如何在父组件中传递属性和子元素给子组件Content，并在子组件中使用lodash的shuffle函数随机展示图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>