Vue组件化开发（三）——slot插槽的使用

相信有过项目开发经验的小伙伴一定知道，在项目中往往会有多个地方需要用到样式相似，细节略有差异的组件，比如说导航栏和搜索栏，这些组件出现频率比较高，但是在不同的场景下我们对于导航栏的内容有着不同的需要。而如果为了这点细微的区别再专门写一个组件会十分麻烦，而且复用性也很低。

可能有些读者会觉得，这不难解决，对于子组件中不确定的地方我们可以交由父组件的props传值来进行解决，比如导航栏中的标题，我们可以都交由父组件传值来实现。（比如下面的导航栏1和导航栏2）

不错，当组件的变化程度不大时，这确实可以十分方便地解决组件复用的问题。但如果说我想要实现根据不同的场景，导航栏中部的位置可能是标题，也有可能是下拉框，是搜索框或者是其他自定义的组件呢？此时我们就很难单纯通过 props 来拓展我们的组件灵活性了。（比如下面的导航栏1和导航栏3）

在子组件中，使用特殊的元素就可以为子组件开启一个插槽。该插槽插入什么内容取决于父组件如何使用。我们可以看一下下面这个案例：

我们一共在Vue实例中使用了2次子组件，第一次父组件没有往子组件中传递元素，第二次父组件有往子组件传递元素。

从结果上看，当父组件没有往子组件插槽中添加元素时，则会展示插槽中默认的内容，而如果父组件有传递插槽内容，则会覆盖插槽的默认内容，而后进行显示。

在第二小节中，我们已经知道了插槽的基本使用，但是当子组件的功能比较复杂时，我们可能就要在组件中定义多个插槽，来满足更加灵活的业务需要。比如上面举例的京东导航栏，这个组件内部可以拆分为三个插槽，分别对应 左 、 右 、 中 三个位置的内容。

但想要在组件内预留多个插槽有个前提条件，就是我们必须要让每个插槽都有其对应的唯一标识，这样父组件传递内容的时候，才能识别出来哪些内容对应哪个插槽。

我们可以看一下下面这个案例：

子组件内定义了三个具名插槽，我们在父组件中进行子组件的调用，需要注意的是我们并没有完全按照顺序去传递对应插槽的内容。但实际上从演示结果中我们可以发现， 无论父组件传递的插槽内容顺序如何，最终解析的时候都会将传入的插槽内容根据 slot name 进行正确的渲染的 。

在讲解作用域插槽之前，我们需要先对 编译作用域 进行理解。具体表现在 父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。

我们可以通过下面这个案例来理解这个规则：

父组件和子组件都使用了 isShow 来控制组件的显示，同时在父子组件的data中，又都有同名的变量 isShow 。我们从结果中可以看到，定义在在父组件中子组件，其组件是否可见取决于父组件data中的变量值。而在子组件template中定义的 isShow 标识，则受子组件自身data变量的约束，也就是说此处子组件模板的变量取的是子级作用域中的变量值。

在上一小节的演示中，我们已经可以了解到编译作用域的概念，也知道了父组件无法直接使用子组件内部的数据（因为子组件模板内部的数据是在子组件的作用域中的）。但 有些场景下，我们又会需要父组件可以替换插槽的标签，但是内容由子组件来提供。 那么，此时我们就可以使用作用域插槽来解决这个问题。

我们可以来看一下下面这个案例：子组件中存在一个数组，现在我们想要通过插槽的方式，来根据不同的需要实现数组的展示方式：

在父组件中，我们定义了2种展示数据的方式，一种为展示为列表形式，还有一种是每种语言以 -- 进行分割。在使用上，子组件需要在插槽处通过 :data 的方式提供对外暴露的数据，父组件在使用的时候，则是先在子组件内部定义 标签，从 slot-scope 属性中取出slotProps参数（其实slotProps就是一个对象，里面封装着所有子组件插槽对外暴露的数据）。

我们通过 slotProps.data 就可以获取到我们在子组件插槽中封装的data数据啦

至此，有关插槽的内容就到此结束啦，作用域插槽多见于常见的组件库中（比较多是在table组件中出现），所以最好要熟悉插槽的原理和使用，这样可以更好地简化我们的开发工作

比如我们遇到组件需要相互嵌套这样的情况：

App.vue 文件

Hello.vue 文件

那这么直接写是肯定只显示 组件的内容

所以就需要用到 slot 插口，否则该组件标签中的内容将会被丢弃

只需要在 Hello.vue 文件内写入 标签

假如我们想要改变 组件内 和 的显示位置，就可以用到一个特殊的特性 name 来进一步配置如何分发内容，多个插槽可以有不同的名字。具名插槽将匹配内容片段中有对应 slot 特性的元素。仍然可以有一个匿名插槽，它是默认插槽，作为找不到匹配的内容片段的备用插槽。如果没有默认插槽，这些找不到匹配的内容片段将被抛弃。

App.vue 文件

Hello.vue 文件

最后渲染显示为

在子组件中，slot 插槽还可以用作传递数据，类似于用 prop 来传递数据

在子组件 Hello.vue 中，只需要将需要传递的内容写入插槽中

相当于被渲染为

在 App.vue 中调用 Hello 组件时，通过在 template 中写入 slot-scope 特殊属性来获取数据

被渲染的结果为：

在 App.vue 组件内

在 Hello.vue 组件中

渲染结果为：

下一篇： Vuex 入门