深入理解vue中的slot插槽

在vue中，有一个插槽的概念。什么是插槽？插槽是子组件提供给父组件使用的一个占位符，父组件可以在这个占位符中填充任何模板代码，如HTML，组件等，填充的内容会替换子组件中的slot标签。也就是说插槽是组件的一块HTML模板，这块模板显示不显示，怎么显示由父组件来决定。
插槽有普通插槽（匿名插槽、具名插槽）和作用域插槽。
一、匿名插槽
匿名插槽，也可以叫它默认插槽，或者与单个插槽（vue的官方叫法），我们可以叫它匿名插槽。因为它不用设置name属性。
单个插槽可以放置在组件的任意位置，但是就像它的名字一样，一个组件中只能有一个匿名插槽。相对应的，具名插槽就可以有很多个，只要名字（name属性）不同就可以了。

二、具名插槽
插槽增加了name属性，就变成了具名插槽，具名插槽可以在一个组件中出现多次，出现在不同的位置。

三、作用域插槽slot-scope
作用域插槽要求，在子组件slot上面绑定数据。父组件只提供样式即可。slot-scope，在vue3中使用v-slot替代

四、总结
1、普通插槽：在父组件编译和渲染的阶段生产vnodes，所以它的数据作用域是父组件实例，子组件渲染的时候直接拿这些渲染好的vnodes
2、作用域插槽：父组件编译和渲染阶段不会直接生成vnodes，只是在父节点的data中保存一个scopedSlots对象，存储不同的插槽和他们对应的渲染函数，只有在子组件渲染阶段才会执行这些渲染函数生成vnodes