vue|3种插槽的简单介绍😎😎

1、 slot什么时候用？

父组件向子组件传递内容

2、为什么需要slot？

slot 与 props 的区别：通过props属性，父组件可以向子组件传递属性、方法，可是父组件不能通过属性传递带标签的内容、甚至是组件，而插槽可以。

3、3种插槽

1.默认插槽

2.具名插槽

4.为什么需要具名插槽？

如果没有定义父组件插入子组件内容的唯一性，那么父组件的内容会被一个slot占用并使用

解决方法： 给父组件和子组件都取一个唯一的标识名，父组件和子组件需要对应

5.作用域插槽

具名插槽在vue 2.6+ 之后，弃用
在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)
已经废弃的slot=“插槽名”用v-slot:“插槽名”代替
已经废弃的slot-scope = “任意名字(一般取scope)”用v-slot=“任意名字(一般取scope)”代替

4、插槽实现原理

当子组件vm实例化时，获取到父组件传入slot标签的内容，存放在vm.$slot中，默认插槽为vm.$slot.default，具名插槽为vm.$slot.xxx，xxx 为插槽名，当组件执行渲染函数时候，遇到slot标签，使用$slot（父组件传入slot标签的内容）中的内容进行替换，此时可以为插槽传递数据，若存在数据，则可称该插槽为作用域插槽。

参考👀

（深入Vue组件）6.slot插槽+作用域插槽

slot的使用

blog.csdn.net/sunnnnh/art…