2.11组件之间的通信---插槽篇

1.认识插槽

• 这个时候我们就可以来定义插槽 (slot)：
  • 插槽的使用过程其实是抽取共性、预留不同；
  • 我们会将共同的元素、内容依然在组件内进行封装；
  • 同时会将不同的元素使用 slot 作为占位，让外部决定到底显示什么样的元素；
• 如何使用 slot 呢？
  • Vue 中将 <slot> 元素作为承载分发内容的出口；
  • 在封装组件中，使用特殊的元素 <slot> 就可以为封装组件开启一个插槽；
  • 该插槽插入什么内容取决于父组件如何使用；

2.组件插槽-基本使用

3.组件插槽-具名插槽

事实上，我们希望达到的效果是插槽对应的显示，这个时候我们就可以使用 具名插槽：

• 具名插槽顾名思义就是给插槽起一个名字，<slot> 元素有一个特殊的 attribute：name；
• 一个不带 name 的 slot，会带有隐含的名字 default；

00.动态插槽名

什么是动态插槽名呢？

• 目前我们使用的插槽名称都是固定的；
• 比如 v-slot:left、v-slot:center 等等；
• 我们可以通过 v-slot:[dynamicSlotName] 方式动态绑定一个名称；

00.具名插槽使用时候缩写

00.渲染作用域

在 Vue 中有渲染作用域的概念：

• 父级模板里的所有内容都是在父级作用域中编译的；
• 子模板里的所有内容都是在子作用域中编译的；

如何理解这句话呢？我们来看一个案例：

• 在我们的案例中 ChildCpn 自然是可以访问自己作用域中的 title 内容的；
• 但是在 App 中，是访问不了 ChildCpn 中的内容的，因为它们是跨作用域的访问；

00.独占默认插槽

00.默认插槽和具名插槽混合

4.组件插槽-作用域插槽

• 当一个组件被用来渲染一个数组元素时，我们使用插槽，并且希望插槽中有显示每项的内容；
• 这个 Vue 给我们提供了作用域插槽；

我们来看下面的一个案例：

1. 在 App.vue 中定义好数据
2. 传递给 ShowNames 组件中
3. ShowNames 组件中遍历 names 数据
4. 定义插槽的 prop
5. 通过 v-slot:default 的方式获取到 slot 的 props
6. 使用 slotProps 中的 item 和 index

例子二：