什么是slot（插槽）
混合父组件的内容与自己的模板
将父组件的内容与子组件的内容像融合，从而弥补视图的不足
单个插槽
<div id="app">
<child-component>
<p>我是正室</p>
</child-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('child-component',{
template: '<div>\
<slot>我是替补</slot>\
</div>'
})
var app = new Vue({
el: '#app',
data: {
}
})
</script>
如果有p的内容，就不显示插槽的内容，如果没有就显示默认的内容
具名插槽
<p slot="命名">我是内容</p>
<slot name="命名"></slot>
把每个插槽进行命名，在组件上进行绑定
作用域插槽
作用域插槽是一种特俗的slot，使用一个可以复用的模板来替换已经渲染的元素---从子组件获取数据
<child-component>
<!-- 必须有template模板，但是只会渲染内容，不会渲染模板。slot的命名,slot-scope等于一个自定义的命名 -->
<template slot
="aaa" slot-scope="props">
{{props.text}}
{{props.val}}
<!-- 除了name以外的都可以拿到 -->
</template>
</child-component>
<script>
Vue.component('child-component',{
template: '<div>\
<slot text="我是来自子组件的数据" name="aaa" val="ababab"></slot>\
</div>'
})
var app= new Vue({
el: '#app'
})
</script>
在2.5.0后的版本可以不用template模板。直接使用需要的标签
访问slot
通过this.$slots.name拿到的是虚拟节点（是一个数组），拿到的节点取第0个，然后再获取innerText
所以通过
this.$slots.name[0].elm.innerText就拿到了'我是标题'
动态组件
component,用来动态挂载不同的组件，使用is特性来实现的
