Vue3插槽原理:
今天在写树组件的时候,需要到了需要用户自定义树的需求,这个需要使用插槽来实现,然后我就学习了一下插槽的原理,大致理解了是怎么一回事,下面开始。
使用组件时,组件标签内的模板会被编译成一个返回vnode的插槽函数,vnode的chilren依赖于函数的参数。对应图片中的左分支。
如果我们在组件内定义了插槽,那么<slot>标签的属性会被编译成一个对象。对应图片中的又分支。
在渲染这个组件时,会使用渲染函数调用插槽函数,并传入那个对象。这样便可得到一个完整的vnode了。可以看出来插槽函数的执行是在渲染这个组件时,具有滞后性。