定义
定义子组件的时候，在子组件内部刨了一个坑（<slot></slot>），父组件想办法往坑里填内容。
单个插槽
定义：子组件中<slot></slot>
使用：父组件使用带有插槽组件时，父组件中对应的内容，会插入插槽中显示
<div id="app">
<!-- 2. 父组件，往坑里填内容 -->
<son>
苍茫惊现青狐妖
</son>
</div>
<script>
// 1. 子组件，内部刨坑，<slot></slot>
Vue.component("son", {
template: `<div>
暗夜步出竹林桥
<slot></slot>
</div>`
})
var vm = new Vue({
el: "#app",
data: {
},
})
</script>
多个（具名）插槽
定义：子组件挖坑<slot name='lyric'></slot>
使用：父组件使用<p slot='lyric'>苍茫惊现青狐妖</p>
<div id="app">
<!-- 2. 父组件，往坑里填内容，slot值要和子组件坑里的name值对应 -->
<son>
<p slot="slotA">苍茫惊现青狐妖</p>
<p slot="slotB">锦绣织缎裹素腰</p>
</son>
</div>
<script>
// 1. 子组件，内部刨坑，<slot></slot>，因为定义了多个slot，所以要为每个slot起name名称
Vue.component("son", {
template: `<div>
暗夜步出竹林桥
<slot name='slotA'></slot>
<slot name='slotB'></slot>
</div>`
})
var vm = new Vue({
el: "#app",
data: {
},
})
</script>
作用域插槽
定义：子组件挖坑时，可以通过【属性传值】的方式，为插槽传递数据
使用：父组件使用插槽时，通过定义slot-scope='value'属性，接收子组件传来的插槽数据
同一组件，不同插槽的作用域，是独立的
<div id="app">
<!-- 2. 父组件，往坑里填内容。内容通过slot-scope从子组件拿到 -->
<son>
<p slot="slotA" slot-scope="data">{{data}}</p>
<hr>
<p slot="slotB" slot-scope="data">{{data.lyc.second}}</p>
</son>
</div>
<script>
Vue.component('son', {
// 1. 子组件挖坑。挖坑同时，【属性传值】给插槽。slotA--直接定义在属性的值，soltB--从data中取出的值
template: `<div>
<slot name='slotA' lyc='暗夜步出竹林桥'></slot>
<slot name='slotB' :lyc='lycData'></slot>
</div>`,
data () {
return {
lycData: {
second: '苍茫惊现青狐妖',
third: '锦绣织缎裹素腰',
}
}
}
})
var vm = new Vue({
el: "#app",
data: {
},
})
</script>
