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

一、對插槽的理解

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

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

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

<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>

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

       <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>標(biāo)簽中加入的內(nèi)容就傳到了子組件中。那么，我們可以將插槽理解成：

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

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

二、具名插槽

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

在組件中，我給插槽起個名字，一個名字叫"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>

三、默認(rèn)插槽

上面已經(jīng)介紹過了，這里不做描述

四、作用域插槽

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

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

<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>

假如我在加一些判斷，對這些數(shù)據(jù)進行操作

<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的朋友們到這一步是不是很熟悉，餓了么組件表格就是這樣實現(xiàn)的，表格的本質(zhì)就是這個。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。