前言：插槽的使用其實是很簡單茫因，你只需要明白兩點：
1.插槽是使用在子組件中的。
2.插槽是為了將父組件中的子組件模板數(shù)據(jù)正常顯示
vue2.0的插槽
話不多說直接上案例：
<div id="app">
<div class="father">
<h3>這里是父組件</h3>
<child>
<span>我是插槽插入的內容</span>
</child>
</div>
</div>
<template id="child">
<div class="child">
<h3>這里是子組件</h3>
<slot></slot>
</div>
</template>
<script>
var vm = new Vue({
el: '#app',
data: {},
components: {
child: {
template: '#child'
}
}
});
</script>
上面的代碼所展示的效果就是你會發(fā)現(xiàn)在 <h3>這里是子組件</h3> 會多一行 <span>我是插槽插入的內容</span>
如果你在子組件里面不寫 <slot></slot> 的話你會發(fā)現(xiàn)你無論在父組件里面寫多少標簽都不會被渲染到子標簽中。
<font color=red>這就是傳說中的插槽了口猜，怎么樣是不是很簡單伴网？</font>
上面的案例是匿名插槽，下面我們來看一下 “具名插槽”
<div id="app">
<div class="father">
<h3>這里是父組件</h3>
<child>
<span slot="demo1">菜單1</span>
<span>菜單2</span>
<span slot="demo3">菜單3</span>
</child>
</div>
</div>
<template id="child">
<div class="child">
<h3>這里是子組件</h3>
<slot></slot>
<slot name="demo3"><slot>
</div>
</template>
<script>
var vm = new Vue({
el: '#app',
data: {},
components: {
child: {
template: '#child'
}
}
});
</script>
具名插槽其實就是在父組件中添加一個 slot='自定義名字' 的屬性烫幕，
然后在子組件中的<slot><slot> 里面添加 <name='自定義名字' 即可
如果父組件中有一部分沒有添加 slot 屬性俺抽，則此處就是默認的插槽，在子組件中的<slot></slot> 直接就是使用的父組件的默認插槽部分
作用域插槽
父組件模板的所有東西都會在父級作用域內編譯较曼；子組件模板的所有東西都會在子級作用域內編譯磷斧。
不過，我們可以在父組件中使用slot-scope 特性從子組件獲取數(shù)據(jù)
前提是需要在子組件中使用:data=data 先傳遞data 的數(shù)據(jù)
<div id="app">
<div class="father">
<h3>這里是父組件</h3>
<child>
<div slot-scope="user">
{{user.data}}
</div>
</child>
</div>
</div>
<script>
Vue.component('child', {
template:'' +
'<div class="child">\n' +
' <h3>這里是子組件</h3>\n' +
' <slot :data="data"></slot>\n' +
' </div>',
data: function () {
return {
data: ['zhangsan', 'lisi', 'wanwu', 'zhaoliu', 'tianqi', 'xiaoba']
}
}
});
var vm = new Vue({
el: '#app',
});
</script>
頁面顯示的結果如下：
這里是父組件
這里是子組件
['zhangsan', 'lisi', 'wanwu', 'zhaoliu', 'tianqi', 'xiaoba']
vue3.0中插槽的使用
匿名插槽用法不變
下面我們來看一下具名插槽的寫法
// 子組件
<div class="hello">
我是一個封裝的組件
<slot name="num"></slot>
</div>
// 父組件
<HelloWorld v-model="masg" v-slot:num>
<div>我是插槽插入的</div>
</HelloWorld>
// 父組件的另外一個寫法
<HelloWorld v-model="masg">
<template v-slot:num>
<div>我是插槽插入的</div>
</template>
</HelloWorld>
Vue3（其實從2.6開始）中引入了一個新的指令 v-slot诗芜，用來表示具名插槽和默認插槽瞳抓。
在 v2.5 之后屏蔽了 slot-scope,
v-slot引入使其插槽更接近指令化。
下面我們來看一下作用域插槽的用法
// 子組件
<div class="hello">
我是一個封裝的組件
<slot :num="num"></slot>
</div>
<script>
import { ref } from 'vue';
export default {
name: 'HelloWorld',
props: {
// msg: String,
modelValue: String
},
setup(prop,context){
const num = ref(10);
return { num }
}
}
</script>
// 父組件
<HelloWorld>
<template v-slot="{num}">
<div>{{num}}</div>
</template>
</HelloWorld>
// 也可以改成下面的寫法
<HelloWorld v-slot="{num}">
<div>{{num}}</div>
</HelloWorld>
和 v-bind和v-on相似伏恐，縮寫只有在存在參數(shù)時才生效孩哑，這就意味著v-slot沒有參數(shù)時不能使用#=,對于默認插槽，可以使用#default來代替v-slot
// 上面我們寫過具名插槽可以這么寫
<HelloWorld v-model="masg">
<template #num>
<div>我是插槽插入的</div>
</template>
</HelloWorld>
// 或者如上面的作用域插槽也可以改成下面的寫法
<HelloWorld>
<template #default="{num}">
<div>{{num}}</div>
</template>
</HelloWorld>
