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

Posted 2023-03-15

参考技术A

相信有过项目开发经验的小伙伴一定知道，在项目中往往会有多个地方需要用到样式相似，细节略有差异的组件，比如说导航栏和搜索栏，这些组件出现频率比较高，但是在不同的场景下我们对于导航栏的内容有着不同的需要。而如果为了这点细微的区别再专门写一个组件会十分麻烦，而且复用性也很低。
可能有些读者会觉得，这不难解决，对于子组件中不确定的地方我们可以交由父组件的props传值来进行解决，比如导航栏中的标题，我们可以都交由父组件传值来实现。（比如下面的导航栏1和导航栏2）
不错，当组件的变化程度不大时，这确实可以十分方便地解决组件复用的问题。但如果说我想要实现根据不同的场景，导航栏中部的位置可能是标题，也有可能是下拉框，是搜索框或者是其他自定义的组件呢？此时我们就很难单纯通过 props 来拓展我们的组件灵活性了。（比如下面的导航栏1和导航栏3）

在子组件中，使用特殊的元素<slot>就可以为子组件开启一个插槽。该插槽插入什么内容取决于父组件如何使用。我们可以看一下下面这个案例：
我们一共在Vue实例中使用了2次子组件，第一次父组件没有往子组件中传递元素，第二次父组件有往子组件传递元素。

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

在第二小节中，我们已经知道了插槽的基本使用，但是当子组件的功能比较复杂时，我们可能就要在组件中定义多个插槽，来满足更加灵活的业务需要。比如上面举例的京东导航栏，这个组件内部可以拆分为三个插槽，分别对应 左 、 右 、 中 三个位置的内容。
但想要在组件内预留多个插槽有个前提条件，就是我们必须要让每个插槽都有其对应的唯一标识，这样父组件传递内容的时候，才能识别出来哪些内容对应哪个插槽。

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

在讲解作用域插槽之前，我们需要先对 编译作用域 进行理解。具体表现在 父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
我们可以通过下面这个案例来理解这个规则：
父组件和子组件都使用了 isShow 来控制组件的显示，同时在父子组件的data中，又都有同名的变量 isShow 。我们从结果中可以看到，定义在在父组件中子组件，其组件是否可见取决于父组件data中的变量值。而在子组件template中定义的 isShow 标识，则受子组件自身data变量的约束，也就是说此处子组件模板的变量取的是子级作用域中的变量值。

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

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

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