前言：插槽的使用其實(shí)是很簡(jiǎn)單，你只需要明白兩點(diǎn)：

1.插槽是使用在子組件中的。

2.插槽是為了將父組件中的子組件模板數(shù)據(jù)正常顯示

vue2.0的插槽

話不多說直接上案例：

<div id="app">
    <div class="father">
        <h3>這里是父組件</h3>
        <child>
           <span>我是插槽插入的內(nèi)容</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>

上面的代碼所展示的效果就是你會(huì)發(fā)現(xiàn)在 <h3>這里是子組件</h3> 會(huì)多一行 <span>我是插槽插入的內(nèi)容</span>
如果你在子組件里面不寫 <slot></slot> 的話你會(huì)發(fā)現(xiàn)你無論在父組件里面寫多少標(biāo)簽都不會(huì)被渲染到子標(biāo)簽中。

<font color=red>這就是傳說中的插槽了，怎么樣是不是很簡(jiǎn)單？</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>

具名插槽其實(shí)就是在父組件中添加一個(gè) slot='自定義名字' 的屬性，
然后在子組件中的<slot><slot> 里面添加 <name='自定義名字' 即可
如果父組件中有一部分沒有添加 slot 屬性，則此處就是默認(rèn)的插槽，在子組件中的<slot></slot> 直接就是使用的父組件的默認(rèn)插槽部分

作用域插槽

父組件模板的所有東西都會(huì)在父級(jí)作用域內(nèi)編譯；子組件模板的所有東西都會(huì)在子級(jí)作用域內(nèi)編譯。
不過，我們可以在父組件中使用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>

頁(yè)面顯示的結(jié)果如下：

這里是父組件

這里是子組件

['zhangsan', 'lisi', 'wanwu', 'zhaoliu', 'tianqi', 'xiaoba']

vue3.0中插槽的使用

匿名插槽用法不變

下面我們來看一下具名插槽的寫法

// 子組件
<div class="hello">
    我是一個(gè)封裝的組件
     <slot name="num"></slot>
  </div>
  
  
// 父組件
<HelloWorld v-model="masg" v-slot:num>
    <div>我是插槽插入的</div>
</HelloWorld>

// 父組件的另外一個(gè)寫法
<HelloWorld v-model="masg">
    <template v-slot:num>
         <div>我是插槽插入的</div>
    </template>
</HelloWorld>

Vue3（其實(shí)從2.6開始）中引入了一個(gè)新的指令 v-slot，用來表示具名插槽和默認(rèn)插槽。
在 v2.5 之后屏蔽了 slot-scope,
v-slot引入使其插槽更接近指令化。

下面我們來看一下作用域插槽的用法

// 子組件
<div class="hello">
    我是一個(gè)封裝的組件
     <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ù)時(shí)才生效，這就意味著v-slot沒有參數(shù)時(shí)不能使用#=,對(duì)于默認(rèn)插槽，可以使用#default來代替v-slot


// 上面我們寫過具名插槽可以這么寫

<HelloWorld v-model="masg">
    <template #num>
         <div>我是插槽插入的</div>
    </template>
</HelloWorld>

// 或者如上面的作用域插槽也可以改成下面的寫法

<HelloWorld>
  <template #default="{num}">
     <div>{{num}}</div>
  </template>
</HelloWorld>