render是进行编译模板的函数，在生命周期函数中，模板编译的底层就是用render函数实现的。
这个例子说明了render函数的实现过程
<body>
<div id="app">
<my-a>
列表
</my-a>
</div>
<script>
let myA={
// render编译模板
// jsx语法 react JavaScript+xml
render(h){//编译模板
// h--创建节点
//这一步便利的是每一个li
let lis=this.arrs.map(item=>{
//返回li
return h('li',{},item.name) //参数一：html的节点模板，参数二：组件的其他配置 参数三：html节点里面的内容
})
//返回将li放入ul，返回ul
return h('ul',{},[this.$slots.default,...lis])
},
data(){
return {
msg:"我是一个div标签",
arrs:[
{id:1,name:'zhangsan',age:12},
{id:2,name:'lisi',age:13},
{id:3,name:'wangwu',age:14},
]
}
}
}
new Vue({
components:{
'my-a':myA
},
el:"#app",
data:{
},
methods:{}
})
</script>
</body>
6918
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
