slot又称插槽，是Vue的内容分发机制，组件内部的模板引擎使用slot元素作为承载分发内容的出口。
插槽slot是子组件的一个模板标签元素，而这一个标签是否显示，以及如何显示都是由父组件所决定的。
插槽的实质：对子组件的拓展，通过
<slot>插槽向组件内部”指定位置“传递内容。
slot可分为三类：默认插槽、具名插槽以及作用域插槽。
1、默认插槽
默认插槽：又名匿名插槽，当slot没有指定name属性值的时候一个默认显示插槽，一个组件内只能有一个匿名插槽。
子组件内部定义插槽，插槽一定要放在子组件中
<template>
<div>
<slot></slot>
</div>
</template>
父组件中使用
<template>
<xx>
</xx>
</template>
<script>
import xx from 'xxxx'
export default {
components: {
xx
}
}
</script>
2、具名插槽
在子组件中定义插槽时，给对应的插槽分别起个名字，方便后续父组件将内容根据name来填充到对应的位置。
使用具名插槽的方法：
1、在子组件中先定义好插槽，并起名字。
2、在父组件中的视图层中，某个标签上，给这个标签添加slot属性，并在这个属性赋值上具名插槽的名字即可。
<body>
<div id="app">
<cpn>
<span slot="center">标题</span>
</cpn>
</div>
<template id="cpn">
<div>
<slot name="center">
<span>中间的</span>
</slot>
<slot>哈哈</slot>
</div>
</template>
</body>
如上所示，”标题“最终会替换掉”中间的“显示
3、作用域插槽
插槽可以控制html模板的显示与不显示。作用域插槽其实就是带数据的插槽。原来父组件可以通过绑定数据传递给子组件。作用域插槽就可以通过子组件绑定数据传递给父组件。
<cpn>
<!-- 目的->获取子组件中的pLanguage -->
<template slot-scope="slot">
<!-- <span v-for="item in slot.data">{{item}} -- </span> -->
<!-- join()将数组以什么方式连接成字符串 -->
<span>{{slot.data.join(' * ')}}</span>
</template>
</cpn>
</div>
<template id="cpn">
<div>
<slot :data='pLanguage'>
<ul>
<li v-for="item in pLanguage">{{item}}</li>
</ul>
</slot>
</div>
</template>
slot-scope就相当于是一个对象，这个对象里面的数据就是子组件插槽绑定传上来了。在vue 2.5.0+ slot-scope不再限制在<template>元素上使用，而可以用在插槽内的任何元素或组件上。
网友评论