1、插槽内容官方文档：https://cn.vuejs.org/v2/guide/components-slots.html
2、什么是插槽？
插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot> 标签。
3、插槽作用
插槽就是Vue实现的一套内容分发的API，可以分发内容，<slot></slot> 元素作为承载分发内容的出口，这句话的意思就是，没有插槽的情况下在组件标签内部一些内容是不起任何作用的，当我在组件中声明了slot元素后，在组件元素内写的内容就会跑到它这里了！
程序员导航
优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站
1、<slot></slot> 元素有一个特殊的属性：name。这个属性可以用来定义插槽的名称，一个不带 name 的 <slot></slot> 出口会带有隐含的名字“default”，我们称为“默认插槽”。
2、我们来实现一个代码案例：
1）在components中新建Loading.vue组件（这里演示我们用条形效果）：
条形效果：
圆形效果：
2）在components中新建Center.vue组件，用于显示网站中间内容（不过中间内容不确定，可能是各种其他组件，因此我们使用插槽）：
AI 工具导航
优网导航旗下AI工具导航，精选全球千款优质 AI 工具集
3）App.vue:
4）运行至浏览器
5）插槽用的比较多的就是我们上面的居中Center.vue和蒙层，下面我们再来创建个蒙层Modal.vue：
6）实现加载条在蒙层中居中显示，修改App.vue：
3、修改Center.vue:
7、运行至浏览器
1、具名插槽，就是给这个插槽起个名字。
在向具名插槽提供内容的时候，我们可以在一个 template元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称， v-slot一般只能用在template标签上。
template元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的template中的内容都会被视为默认插槽的内容。然而，如果你希望更明确一些，仍然可以在 template 上使用v-slot:default
2、修改Center.vue的template如下：
免费在线工具导航
优网导航旗下整合全网优质免费、免注册的在线工具导航大全
3、修改App.vue的template如下：
兄弟们，快去填坑，我先填默认坑
我是slot1模板,我去填slot1这个坑我是slot2模板,我去填slot2这个坑
4、测试运行：
[v_warn]提示：其实上中下布局完全没必要使用插槽去做，这里只是作为一个练习而已。[/v_warn]
1、在components中新建Header.vue组件：
3、在components中新建Home.vue组件：
这里是首页内容
4、在components中新建Footer.vue组件：
5、在components中新建Index.vue组件：
6、修改App.vue
7、运行至浏览器
有时让插槽内容能够访问子组件中才有的数据是很有用的。例如如下案例想讲插槽中的姓替换为名字：
1）在components中新建CurrentUser.vue组件：
{{user.firstName}}
2）修改App.vue如下，想将姓换为对应的名字：
{{user.lastName}}
3）运行发现，根本无法实现，因为App.vue中根本无法访问子组件CurrentUser中的user数据，报错如下：
4）为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 slot 元素的一个属性绑定上去，修改CurrentUser.vue中插槽代码如下：
{{user.firstName}}
5）绑定在 slot 元素上的 属性被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字，修改App.vue的CurrentUser部分代码如下：
{{slotProps.user.lastName}}
在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 slotProps，但你也可以使用任意你喜欢的名字。
6）运行发现，成功修改：
相关文章
