最近在看vue官方的视频教程（尤大大手写mini版vue3的视频，发现渲染函数掌握不到位，所以再学了一遍）
1.render选项参数createElement函数
let getChildrenContent = (vNode)=>{
vNode.map(node=>{
return node.children?
getChildrenContent(node):
node.text
})
}
Vue.component('a-head',{
render(createElement){
function getHeadId() {
return getChildrenContent(this.$slots.default)
}
let headId = getHeadId()
return createElement(
//第一个参数可以是节点名称（‘div’）|| 选项对象 || resolve 了上述任何一种的一个 async 函数。必填项。
‘h’+this.level,
//第二个参数是数据对象(可选)，包含了元素节点上可以定义的一些属性，比如'v-on','class'之类
{
on: {
click: alert(headId)
}
},
//第三个参数是子级虚拟节点(可选)，字符串或者数组
[
createElement('a', {
attrs: {
name: headId,
src: #+headId
}
}, this.$slots.default)
]
)
},
prop: {
level: {
type: String,
required: true
}
}
})
2.作用域插槽如何在render中实现
Vue.component('my-name', {
render(h){
return h('div', this.$scopeSlots.default({
user: this.user
}))
},
props: {
user: {
type: String,
required: true
}
}
})
3.如果在render中访问render中子组件作用域插槽比如获取下面child组件中默认作用域插槽绑定的text
Vue.component('father', {
render(h) {
return h('child',
{
scopedSlots: {
default: (props) => h('span', props.text)
}
})
}
})
4.实现v-model
可以利用数据对象中的domProps获取value, 再加上input事件，进行数据双向绑定
