vue.js 种 slot的理解

Slot的通俗理解
插槽就是动态交互父子组件之间的数据的机器臂
是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中位置），当插槽也就是坑有命名时，组件标签中使用属性slot=”mySlot”的元素就会替换该对应位置内容；

slot 使用 可以传递内容 也可以传递标签
理解：
1.假如子组件没有slot插槽，父组件的内容将被会丢弃

2.假如子组件只有一个插槽，并且这个slot没有属性，那么父组件的所有包含在自定义组件标签里面的内容将插入到slot所在的位置，slot标签消失

3.假如自定义组件标签里面没有内容，就会显示slot里面的备用内容

Slot使用

1、组件中有单个或多个未命名slot标签时，如下：
hello world

这是在slot上添加了样式

这是拥有命名的slot的默认内容

 会输出：两个红色的hello world，以及一个使用slot的默认内容

注意：在slot标签添加样式无效。拥有命名的插槽不能被不含slot属性的标签内容替换，会显示slot的默认值（具名slot具有对应性）；

2、组件中有多个命名的slot插槽时，可以实现父组件对子组件的指定位置显示内容或传参，如下：

3、作用域插槽！！：
使用时候子组件标签中要有标签，再通过scopeName.childProp就可以调用子组件模板中的childProp绑定的数据，所以作用域插槽是一种子传父传参的方式，解决了普通slot在parent中无法访问child数据的去问题；

原文：https://blog.youkuaiyun.com/zhouzuoluo/article/details/80536754