【前端-VUE+TS】Vue3组件化-下（五）

一. 插槽的使用

1.1. 认识插槽slot

在开发中，我们会经常封装一个个可复用的组件：

• 前面我们会通过props传递给组件一些数据，让组件来进行展示；
• 但是为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的div、span等等这些元素；
• 比如某种情况下我们使用组件希望组件显示的是一个按钮，某种情况下我们使用组件希望显示的是一张图片；
• 我们应该让使用者可以决定某一块区域到底存放什么内容；

举个栗子：假如我们定制一个通用的导航组件 - NavBar

• 这个组件分成三块区域：左边-中间-右边，每块区域的内容是不固定；
• 左边区域可能显示一个菜单图标，也可能显示一个返回按钮，可能什么都不显示；
• 中间区域可能显示一个搜索框，也可能是一个列表，也可能是一个标题，等等；
• 右边可能是一个文字，也可能是一个图标，也可能什么都不显示；

京东导航

这个时候我们就可以来定义插槽slot：

• 插槽的使用过程其实是抽取共性、保留不同；
• 我们会将共同的元素、内容依然在组件内进行封装；
• 同时会将不同的元素使用slot作为占位，让外部决定到底显示什么样的元素；

如何使用slot呢？

• Vue中将  元素作为承载分发内容的出口；
• 在封装组件中，使用特殊的元素就可以为封装组件开启一个插槽；
• 该插槽插入什么内容取决于父组件如何使用；

1.2. 插槽的使用

1.2.1. 插槽的基本使用

我们一个组件MySlotCpn.vue：

• 该组件中有一个插槽，我们可以在插槽中放入需要显示的内容；

我们在App.vue中使用它们：

• 我们可以插入普通的内容、html元素、组件元素，都可以是可以的；

1.2.2. 插槽的默认内容

有时候我们希望在使用插槽时，如果没有插入对应的内容，那么我们需要显示一个默认的内容：

• 当然这个默认的内容只会在没有提供插入的内容时，才会显示；

插槽的默认值

1.2.3. 具名插槽的使用

我们先测试一个知识点：如果一个组件中含有多个插槽，我们插入多个内容时是什么效果？

• 我们会发现默认情况下每个插槽都会获取到我们插入的内容来显示；

多个插槽的效果

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

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

在向具名插槽提供内容的时候，我们可以在一个