一開始接觸vue時并不知道插槽是什么，后來看了很多文章也是一知半解。然后自己手動敲了一下，在項目中實際應用一下，實在太好用了。后來做小程序后發(fā)現也能使用slot，不單單在vue中使用。我就是這么目光短淺（QAQ）。尤其在做組件開發(fā)的時候更不能少了slot的使用。

一、對插槽的理解

對于一開始聽到別人提起，這段代碼中用個插槽特別方便。然而并不知什么是插槽，為什么要用插槽。后來看了很多文章，以下為個人的理解：

插槽用在子組件中，使用<slot></slot>標簽。然后父組件在使用子組件的時候在子組件標簽中添加的內容就能傳到子組件中，<slot></slot>就是用來存放父組件在子組件標簽中放置的內容的。

光說不行，讀完上邊的話再來看看這段代碼

<div id="app">
    <child>你好</child>
</div>
        
<script type="text/javascript">
    //定義組件
    Vue.component('child',{
    template:`<div>Hello,World!</div>`
    })
     //創(chuàng)建vue實例
    var vm = new Vue({
        el: "#app",
        data:{
                    
        }
    })
</script>

結果并沒有“你好”輸出。然后我們在子組件中加入一個<slot></slot>標簽

       <script type="text/javascript">
            //定義組件
            Vue.component('child',{
                template:`<div>
                            Hello,World!
                            <slot></slot>
                           </div>`
            })
            //創(chuàng)建vue實例
            var vm = new Vue({
                el: "#app",
                data:{
                    
                }
            })
        </script>    

這樣父組件中在使用<child></child>標簽中加入的內容就傳到了子組件中。那么，我們可以將插槽理解成：

插槽就是Vue實現的一套內容分發(fā)的API，將<slot></slot>元素作為承載分發(fā)內容的出口。插槽就相當于在子組件中留出個位置給父組件，如果父組件中有內容傳進來，那么就放到slot中。

沒有插槽的情況下在組件標簽內些一些內容是不起任何作用的，當我在組件中聲明了slot元素后，在組件元素內寫的內容就會跑到它這里了！如果<slot></slot>里原來有默認內容，那么會替換掉。

二、具名插槽

具名插槽，就是給這個插槽起個名字

在組件中，我給插槽起個名字，一個名字叫"girl"，一個名字叫"boy"，還有一個不起名字

<div id="app">
    <child>
        <template slot="girl">
            漂亮、美麗、購物、逛街
        </template>
        <template slot="boy">
            帥氣、才實
        </template>
        <div>
            無名無姓，普通的插槽
        </div>
    </child>
</div>

<script type="text/javascript">
    //定義組件
    Vue.component('child',{
        template:`<div>
                    <slot name="girl"></slot>
                    <div></div>
                    <slot name="boy"></slot>
                    <div></div>
                    <slot></slot>
                   </div>`
    })
    //創(chuàng)建vue實例
    var vm = new Vue({
        el: "#app",
        data:{
            
        }
    })
</script>

三、默認插槽

上面已經介紹過了，這里不做描述

四、作用域插槽

之前一直沒搞懂作用域插槽到底是什么，該怎么用。研究發(fā)現以后，個人理解為：

在組件中綁定在slot標簽上的屬性，在父組件使用組件標簽時可以拿到屬性/值。請看如下代碼：

<div id="app">
    <child>
        <div slot-scope="a">
            {{a}}
        </div>
    </child>
</div>

<script type="text/javascript">
    //定義組件
    Vue.component('child',{
        template:`<div>
                    <slot say="你好"></slot>
                   </div>`
    })
    //創(chuàng)建vue實例
    var vm = new Vue({
        el: "#app",
        data:{
            
        }
    })
</script>

通過在瀏覽器上查看，以json對象形式展示出來，只不過它是個字符串。

<div id="app">
    <child :lists="listPhone">
        <div slot-scope="a">
            {{a}}
        </div>
    </child>
</div>
<template id="temp">
    <div>
        <ul>
            <li v-for="list in lists">
                <slot :phone="list"></slot>
            </li>
        </ul>
    </div>
</template>
<script type="text/javascript">
    //定義組件
    Vue.component('child',{
        props:['lists'],
        template:"#temp"
    })
    //創(chuàng)建vue實例
    var vm = new Vue({
        el: "#app",
        data:{
            listPhone:[
                {id:1,brand:"蘋果"},
                {id:2,brand:"華為"},
                {id:3,brand:"榮耀"},
                {id:4,brand:"小米"}
            ]
        }
    })
</script>

假如我在加一些判斷，對這些數據進行操作

<div id="app">
    <child :lists="listPhone">
        <div slot-scope="a">
            <div v-if="a.phone.id===1">這是{{a.phone.brand}}</div>
            <div v-else>{{a.phone.brand}}</div>
        </div>
    </child>
</div>
<template id="temp">
    <div>
        <ul>
            <li v-for="list in lists">
                <slot :phone="list"></slot>
            </li>
        </ul>
    </div>
</template>
<script type="text/javascript">
    //定義組件
    Vue.component('child',{
        props:['lists'],
        template:"#temp"
    })
    //創(chuàng)建vue實例
    var vm = new Vue({
        el: "#app",
        data:{
            listPhone:[
                {id:1,brand:"蘋果"},
                {id:2,brand:"華為"},
                {id:3,brand:"榮耀"},
                {id:4,brand:"小米"}
            ]
        }
    })
</script>

用過element-ui的朋友們到這一步是不是很熟悉，餓了么組件表格就是這樣實現的，表格的本質就是這個。

總結

以上是生活随笔為你收集整理的slot的深入理解和应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。