跳到主要内容

认识

2023年04月24日
柏拉文
越努力,越幸运

一、认识


slot 可以分发内容。其中, slot 可以分为:

  • 普通插槽

  • 作用域插槽

普通插槽和作用域插槽的实现。它们有一个很大的差别是数据作用域。具体分析如下:

1.1 普通插槽

普通插槽是在父组件编译和渲染阶段生成 vnodes,所以数据的作用域是父组件实例,子组件渲染的时候直接拿到这些渲染好的 vnodes

1.2 作用域插槽

对于作用域插槽,父组件在编译和渲染阶段并不会直接生成 vnodes,而是在父节点 vnodedata 中保留一个 scopedSlots 对象,存储着不同名称的插槽以及它们对应的渲染函数,只有在编译和渲染子组件阶段才会执行这个渲染函数生成 vnodes,由于是在子组件环境执行的,所以对应的数据作用域是子组件实例。

1.3 沉淀与总结

两种插槽的目的都是让子组件 slot 占位符生成的内容由父组件来决定,但数据的作用域会根据它们 vnodes 渲染时机不同而不同。