slot

slot

 

 

1.普通slot，就是在模板编译的时候，对应生成父组件和子组件的VNode。

 

首先生成父组件的Vnode，然后生成子组件的Vnode，在生成子组件Vnode过程中会拿到父组件的上下文，然后就可以拿到父组件内插入的元素，然后对子组件中的slot中内容进行替换，后面进行渲染。

 

 

2.对于slot-scope，父组件生成的vnode中有一个函数，子组件生成的时候要去调用函数，再生成实际的内容，所以可以进而拿到子组件作用域中的内容。

 

slot-scope demo:

 

子组件：(<Component/>)

 

—>

<div>aaa

<slot prop1=‘asdf’></slot>    <---- 在slot上挂属性

</div>

<—

 

父组件

 

—>

<Component>

 <div slot-scope=‘asd’>{{ asd.prop1 }}</div>   <—— 父组件会生成一个函数，子组件初始化时，会调用函数，进而可以拿到子作用域中的数据和内容。

 

<Component/>

<—

 

 

 

总结

普通插槽和作用域插槽的实现。

它们有一个很大的差别是数据作用域，

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

 

对于作用域插槽，父组件在编译和渲染阶段并不会直接生成 vnodes，而是在父节点 vnode 的 data 中保留一个 scopedSlots 对象，存储着不同名称的插槽以及它们对应的渲染函数，

只有在编译和渲染子组件阶段才会执行这个渲染函数生成 vnodes，由于是在子组件环境执行的，所以对应的数据作用域是子组件实例。

 

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