你以为组件就这么完了？想太多啦~组件是Vue中很重要的部分，取经的道路还是十分漫长滴。今天呢，小编为大家带来组件的进阶版：组件插槽
一、插槽是谁？
1.生活中的插槽
其实我们生活中有很多很多的插槽。比如电脑的USB插槽、插板中的电源插槽等等。每个插槽都有它们之间的价值。比如电脑的USB插槽，可以用来插U盘，链接鼠标，链接手机、音响等等，通过这些插槽，大大拓展了原有设备的功能。
2.组件中的插槽
组件中的插槽，让使用者可以决定组件内部的一些内容到底展示什么，具有插槽的组件将会有更加强大的拓展性，这跟王者荣耀中获得的绝版皮肤是一样的道理。
二、插槽从哪里来？
其实为什么会有插槽的产生呢，因为客户的无厘头需求。
不行，小编最近不能再吐槽客户了，要抑制住最近的情绪，世界如此美妙，你却如此暴躁，这样不好，不好。我们先用下面的例子来引入插槽从哪里来：
三个页面中都有导航栏，基本结构都是一样的：左中右分别有一个东西，只是显示的内容不同而已。那我们如何来实现这种结构相似但是内容不同呢？
你一定是想着，直接定义三个组件，然后在模板中分别显示不同的内容，对不对？那小编要恭喜你，你就快要被炒了。
首先，如果我们封装成三个组件，显然不合适，比如每个页面都有返回，这部分的内容我们就要重复去封装
其次，如果我们封装成一个，还是不合理，因为有些左侧的菜单栏，有些中间是搜索框，有些是文字。
那我们该怎么办呢？其实很简单，用组件插槽。
三、怎么用给插槽？
上面最佳的解决办法是将共性抽取到组件中，将不同暴露给插槽，一旦我们使用了插槽，就相当于预留了空间，空间的内容取决于使用者。具体呢可以分成以下两种用法：
1.使用空插槽
<body>
<div id="warp">
<cnp></cnp>
<cnp></cnp>
<cnp></cnp>
</div>
<template id="tem">
<div>
<h2>我是标题</h2>
<p>我是段落</p>
<button>按钮</button>
</div>
</template>
<script>
var vm = new Vue({
el:"#warp",
components:{
cnp:{
template:"#tem"
}
}
})
</script>
</body>
小编想将第二个子组件的按钮变成span标签，将第三个子组件的按钮变成i标签，只需要引入slot标签，然后在cnp标签添加内容即可
<!-- 第一步：在子组件模板使用slot标签 -->
<template id="tem">
<div>
<h2>我是标题</h2>
<p>我是段落</p>
<slot></slot>
</div>
</template>
<!-- 第一步：在子组件cnp标签填充内容 -->
<div id="warp">
<cnp><buton>按钮</buton></cnp>
<cnp><span>我是span标签</span></cnp>
<cnp><i>我是i标签</i></cnp>
</div>
使用了slot标签，就相当于预留了空间，空间的内容取决于使用者。比如本例子中，子组件cnp模板使用slot标签，slot的内容就会被cnp标签的内容替换掉，比如第一个slot的内容就被button标签替换了，第二个slot的内容就被span标签替换了。
2.有默认值的插槽
这种情况一般是，总共有十个东西，八个的内容是一样的，只有两个内容不一样情况。比如接着上面的例子，小编想第一个子组件和第二个子组件都是按钮，第三个子组件是span标签，只需要在slot标签填充默认的内容即可：
<template id="tem">
<div>
<h2>我是标题</h2>
<p>我是段落</p>
<slot><button>按钮</button></slot>
</div>
</template>
<div id="warp">
<cnp></cnp>
<cnp></cnp>
<cnp><span>我是span标签</span></cnp>
</div>
为什么这里的第一个cnp和第二个cnp标签没有内容也有东西显示出来呢？因为slot有默认的button。当cnp没有写内容的时候，就显示slot默认的内容；当cnp写了内容，原本slot默认的内容就会被覆盖。
其实小编很好奇【因为小编是好奇宝宝，哈哈哈O(∩_∩)O哈哈~】如果是下面这种情况，slot的内容会被那个标签替换呢？
<div id="warp">
<cnp>
<p>哈哈哈</p>
<span>呵呵呵</span>
<i>嘻嘻嘻</i>
</cnp>
</div>
被“哈哈哈”替代？被“呵呵呵”替代？被“嘻嘻嘻”替代？那么究竟花落谁家呢？让我们拭目以待吧!
骗你的，其实下面就有答案：
事实证明，slot被三个标签同时替代了！也就是说会被cnp标签的所有内容替换掉，记住了嘛？这个是小黑板的知识点唷o(￣︶￣)o
四、具名插槽
什么是具名插槽呢？简单的理解就是给slot起名字，为什么要起名字呢？因为有名字我们才好区分，才好让使用者对某个特定名字的插槽进行不同的操作。比如：
三个页面的导航栏不一样，那么我们就需要在子组件cnp的模板中用三个插槽
<template id="tem">
<div>
<slot><</slot>
<slot>购物车</slot>
<slot>···</slot>
</div>
</template>
可以发现，通过给solt设置默认值是可以实现这个样式的。但是呢，我们子组件一般都提倡复用，在第一个页面可能有“购物车”这个样式，第二个页面未必有这个样式，如果每调用一次子组件就修改slot的默认值，你会发现这是一件非常错误的事情。
所以我们通过具名插槽来实现，具体看下面的代码：
<template id="tem">
<div>
<slot name="left"></slot>
<slot name="center"></slot>
<slot name="right"></slot>
</div>
</template>
<div id="warp">
<cnp>
<span slot="left"><</span>
<span slot="center">购物车</span>
<span slot="right">···</span>
</cnp>
</div>
首先我们为插槽起了名字，然后在使用的时候，只要告诉某个标签，你的内容想显示在那个插槽，就写入那个插槽的名字。就像去参加相亲，你肯定会写下你心仪对象的名字啦(✿◡‿◡)。
好啦~今天小编分享的slot小知识就到这里啦，谢谢大伙的支持。
❤❤❤记得点赞唷(＾Ｕ＾)ノ~ＹＯ❤❤❤
