vue render函数

最新推荐文章于 2024-07-16 11:34:18 发布

铁树哥写Java

最新推荐文章于 2024-07-16 11:34:18 发布

阅读量113

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/mhbsoft/article/details/113731692

版权

vue 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

App.vue

<!-- render 函数 -->
<Heading tag="ul"></Heading>  // 向下传递ul 标签 与this.tag 对应
<script>
import Heading from './views/Heading.vue';
export default {
    name: 'App',
    components: {
        Heading
    }
    ......
}
</script>

Heading.vue

export default {
    name: "Heading",
    props: {
        tag: String  // 子组件接收父组件传的 tag=ul 值
    },
    data() {
        return {
            people: ['你好', '我好', '大家好']
        }
    },
    render(createElement, context) {   // render 函数
    	// 创建 ul 标签
        return createElement(this.tag, {}, this.people.map((name, index) => {
            return createElement('li', {  // 创建 li 标签
            	// attrs 添加属性，添加点击 on click 事件
                attrs: {class: 'red', id: index}, on: {
                    click: () => {
                        console.log('li click')
                    }
                }
            }, name)
        }));
    }
}
</script>

结果显示一个ul 三个 li 标签：