vue当中的插槽，指的即是slot，是组件当中的一块HTML模板。该模板是否显示，以及如何显示由其父组件说了算。不过插槽显示的位置是由子组件决定 ，你将slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块！
单个插槽
单个插槽是vue官方的叫法。你也可以叫它默认插槽。另外因为该插槽不用设置name属性，也可以称其为匿名插槽。
先来看一个例子。
父组件：
<template>
<div>
<h3>我是一个父组件</h3>
<!--显示子组件，在child组件写入一个HTML模板，该模板会替换子组件的slot-->
<child>
<div>
有位非常漂亮的女同事，有天起晚了没有时间化妆便急忙冲到公司。结果那天她被记旷工了……
</div>
</child>
</div>
</template>
子组件：
<template>
<div>
<h5>我是子组件</h5>
<slot></slot>
</div>
</template>
在上面例子中，父组件在<child></child>里面写了html模板，子组件的slot会被该模板覆盖掉！也可以说子组件的插槽被使用了，最终会是下面这个样子：
<div>
<h3>我是一个父组件</h3>
<div>
<h5>我是子组件</h5>
<div>
有位非常漂亮的女同事，有天起晚了没有时间化妆便急忙冲到公司。结果那天她被记旷工了……
</div>
</div>
</div>
- 如果子组件有多个匿名插槽，均会被使用，我们来将子组件修改下：
<template>
<div>
<h5>我是子组件</h5>
<slot></slot>
<slot></slot>
<slot></slot>
</div>
</template>
运行之后会变成这个样子：
<div>
<h3>我是一个父组件</h3>
<div>
<h5>我是子组件</h5>
<div>
有位非常漂亮的女同事，有天起晚了没有时间化妆便急忙冲到公司。结果那天她被记旷工了……
</div>
<div>
有位非常漂亮的女同事，有天起晚了没有时间化妆便急忙冲到公司。结果那天她被记旷工了……
</div>
<div>
有位非常漂亮的女同事，有天起晚了没有时间化妆便急忙冲到公司。结果那天她被记旷工了……
</div>
</div>
</div>
然后看一下console:
[Vue warn]: Duplicate presence of slot "default" found in the same render tree - this will likely cause render errors.
没错，飘红了！为什么？因为Vue 2.0中不允许有重名的slot。如果你没有代码洁癖的话，现在就可以下班闪人了！等着后面同事用你组件时来向你抱怨！如果要在不同位置渲染同一内容，你可以用 prop 来传递。
具名插槽
匿名插槽是没有名字的插槽。如果给插槽加上name属性，我们可以将其称为具名插槽！
再来看个例子。
父组件：
<template>
<div>
<h3>我是一个父组件</h3>
<!--显示子组件-->
<child>
<div slot="zhang">老张</div>
<div slot="wang">老王</div>
<div>老李</div>
</child>
</div>
</template>
子组件：
<template>
<div>
<h5>我是子组件</h5>
<!--具名插槽-->
<slot name="zhang"></slot>
<!--具名插槽-->
<slot name="wang"></slot>
<!--匿名插槽-->
<slot></slot>
</div>
</template>
最终渲染的结果：
<div>
<h3>我是一个父组件</h3>
<!--显示子组件-->
<div>
<h5>我是子组件</h5>
<div>老张</div>
<div>老王</div>
<div>老李</div>
</div>
</div>
可以看出父组件通过模板上添加slot属性与具名插槽的进行关联。没有slot属性的html模板默认关联匿名插槽。
作用域插槽
作用域插槽与前面两种插槽相比，作用域插槽是要在slot上面绑定数据的。所以我们也可以称作用域插槽为带数据插槽。
再来看一下之前两种插槽的写法：
<!--匿名插槽-->
<slot></slot>
<!--具名插槽-->
<slot name="up"></slot>
作用域插槽需要绑定上数据：
<template>
<div>
<h5>我是子组件</h5>
<slot name="zhang" :data="sexArr"></slot>
</div>
</template>
<script>
export default {
name: "child",
data(){
return {
sexArr:["男","女"]
}
}
}
</script>
父组件：
<template>
<div>
<h3>我是一个父组件</h3>
<!--显示子组件-->
<child>
<template slot="zhang" slot-scope="item">
<div v-for="sex in item.data">
<p>{{sex}}</p>
</div>
</template>
</child>
</div>
</template>
赶紧动手试试吧！
