Vue3插槽原理:

93 阅读1分钟

Vue3插槽原理:

今天在写树组件的时候,需要到了需要用户自定义树的需求,这个需要使用插槽来实现,然后我就学习了一下插槽的原理,大致理解了是怎么一回事,下面开始。

slot原理图.png 使用组件时,组件标签内的模板会被编译成一个返回vnode的插槽函数,vnode的chilren依赖于函数的参数。对应图片中的左分支。

如果我们在组件内定义了插槽,那么<slot>标签的属性会被编译成一个对象。对应图片中的又分支。

在渲染这个组件时,会使用渲染函数调用插槽函数,并传入那个对象。这样便可得到一个完整的vnode了。可以看出来插槽函数的执行是在渲染这个组件时,具有滞后性。