前言
插槽是Vue框架中的一个重要的概念，插槽的存在使得我们的组件更加具有灵活性，同时在多个开源的组件库中，我们也常常可以看到有些开源组件也同样预留了插槽让我们去进行自定义的开发，可以说插槽算是Vue开发所必须掌握的知识点了。本篇文章将对Slot插槽的使用进行讲解，同时对具名插槽和作用域插槽的使用场景进行介绍，希望对大家有所帮助。
一、为什么要使用Slot
相信有过项目开发经验的小伙伴一定知道，在项目中往往会有多个地方需要用到样式相似，细节略有差异的组件，比如说导航栏和搜索栏，这些组件出现频率比较高，但是在不同的场景下我们对于导航栏的内容有着不同的需要。而如果为了这点细微的区别再专门写一个组件会十分麻烦，而且复用性也很低。
可能有些读者会觉得，这不难解决，对于子组件中不确定的地方我们可以交由父组件的props传值来进行解决，比如导航栏中的标题，我们可以都交由父组件传值来实现。（比如下面的导航栏1和导航栏2）
不错，当组件的变化程度不大时，这确实可以十分方便地解决组件复用的问题。但如果说我想要实现根据不同的场景，导航栏中部的位置可能是标题，也有可能是下拉框，是搜索框或者是其他自定义的组件呢？此时我们就很难单纯通过props来拓展我们的组件灵活性了。（比如下面的导航栏1和导航栏3）
导航栏1
导航栏2
导航栏3
二、slot插槽的基本使用
在子组件中，使用特殊的元素<slot>就可以为子组件开启一个插槽。该插槽插入什么内容取决于父组件如何使用。我们可以看一下下面这个案例：
我们一共在Vue实例中使用了2次子组件，第一次父组件没有往子组件中传递元素，第二次父组件有往子组件传递元素。
<body>
<div id="app">
<slot-component></slot-component>
<slot-component>
<div>
<h4>父组件通过插槽改变默认子组件的默认内容1</h4>
<h4>父组件通过插槽改变默认子组件的默认内容2</h4>
</div>
</slot-component>
</div>
<template id="myComponent">
<div>
<slot>我是插槽的默认内容</slot>
</div>
</template>
<script>
Vue.component('slot-component',{
template: '#myComponent'
})
let app = new Vue({
el: '#app',
})
</script>
</body>
slot的基本使用
从结果上看，当父组件没有往子组件插槽中添加元素时，则会展示插槽中默认的内容，而如果父组件有传递插槽内容，则会覆盖插槽的默认内容，而后进行显示。
三、具名插槽
在第二小节中，我们已经知道了插槽的基本使用，但是当子组件的功能比较复杂时，我们可能就要在组件中定义多个插槽，来满足更加灵活的业务需要。比如上面举例的京东导航栏，这个组件内部可以拆分为三个插槽，分别对应左、右、中三个位置的内容。
但想要在组件内预留多个插槽有个前提条件，就是我们必须要让每个插槽都有其对应的唯一标识，这样父组件传递内容的时候，才能识别出来哪些内容对应哪个插槽。
我们可以看一下下面这个案例：
子组件内定义了三个具名插槽，我们在父组件中进行子组件的调用，需要注意的是我们并没有完全按照顺序去传递对应插槽的内容。但实际上从演示结果中我们可以发现，无论父组件传递的插槽内容顺序如何，最终解析的时候都会将传入的插槽内容根据slot name进行正确的渲染的。
<body>
<div id="app">
<slot-component></slot-component>
<br/><br/><br/>
<slot-component>
<div class="common-slot slot2" slot="slot2">
插槽2内容
</div>
<div class="common-slot slot1" slot="slot1">
插槽1内容
</div>
<div class="common-slot slot3" slot="slot3">
插槽3内容
</div>
</slot-component>
</div>
<template id="myComponent">
<div>
<slot name="slot1">我是插槽1的默认内容</slot>
<slot name="slot2">我是插槽2的默认内容</slot>
<slot name="slot3">我是插槽3的默认内容</slot>
</div>
</template>
<script>
Vue.component('slot-component',{
template: '#myComponent'
})
let app = new Vue({
el: '#app',
})
</script>
</body>
image.png
四、作用域插槽
（一）编译作用域
在讲解作用域插槽之前，我们需要先对编译作用域进行理解。具体表现在父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
我们可以通过下面这个案例来理解这个规则：
父组件和子组件都使用了isShow来控制组件的显示，同时在父子组件的data中，又都有同名的变量isShow。我们从结果中可以看到，定义在在父组件中子组件，其组件是否可见取决于父组件data中的变量值。而在子组件template中定义的isShow标识，则受子组件自身data变量的约束，也就是说此处子组件模板的变量取的是子级作用域中的变量值。
<body>
<div id="app">
<slot-component v-show="isShow"></slot-component>
</div>
<template id="myComponent">
<div>
<h2>HELLO</h2>
<div v-show="isShow">
HI
</div>
</div>
</template>
<script>
Vue.component('slot-component', {
template: '#myComponent',
data() {
return {
isShow: false
}
}
})
let app = new Vue({
el: '#app',
data: {
isShow: true
}
})
</script>
</body>
编译作用域演示用例
（二）作用域插槽
在上一小节的演示中，我们已经可以了解到编译作用域的概念，也知道了父组件无法直接使用子组件内部的数据（因为子组件模板内部的数据是在子组件的作用域中的）。但有些场景下，我们又会需要父组件可以替换插槽的标签，但是内容由子组件来提供。那么，此时我们就可以使用作用域插槽来解决这个问题。
我们可以来看一下下面这个案例：子组件中存在一个数组，现在我们想要通过插槽的方式，来根据不同的需要实现数组的展示方式：
在父组件中，我们定义了2种展示数据的方式，一种为展示为列表形式，还有一种是每种语言以--进行分割。在使用上，子组件需要在插槽处通过:data的方式提供对外暴露的数据，父组件在使用的时候，则是先在子组件内部定义<template>标签，从slot-scope属性中取出slotProps参数（其实slotProps就是一个对象，里面封装着所有子组件插槽对外暴露的数据）。
我们通过slotProps.data就可以获取到我们在子组件插槽中封装的data数据啦
<body>
<div id="app">
<slot-component>
<template slot-scope="slotProps">
<ul>
<li v-for="lang in slotProps.data">{{lang}}</li>
</ul>
</template>
</slot-component>
<slot-component>
<template slot-scope="slotProps">
<ul>
<span v-for="(lang,index) in slotProps.data">
<span v-if="index<5">{{lang}}--</span>
<span v-else>{{lang}}</span>
</span>
</ul>
</template>
</slot-component>
</div>
<template id="myComponent">
<div>
<slot :data="languages"></slot>
</div>
</template>
<script>
Vue.component('slot-component', {
template: '#myComponent',
data() {
return {
languages: [
'python', 'java', 'go', 'c#', 'scala', 'javaScript'
]
}
}
})
let app = new Vue({
el: '#app',
})
</script>
</body>
作用域插槽演示用例
至此，有关插槽的内容就到此结束啦，作用域插槽多见于常见的组件库中（比较多是在table组件中出现），所以最好要熟悉插槽的原理和使用，这样可以更好地简化我们的开发工作
网友评论