Vue 插槽詳解

Vue插槽，是學習vue中必不可少的一節，當初剛接觸vue的時候，對這些掌握的只知其一;不知其二，特別是做用域插槽一直沒明白。

後面愈來愈發現插槽的好用。

分享一下插槽的一些知識吧。

分一下幾點：

一、插槽內能夠放置什麼內容？

二、默認插槽

三、具名插槽

四、做用域插槽

 

1、插槽內容

　　一句話：插槽內能夠是任意內容。

　　　先看一下下面的代碼：聲明一個child-component組件，

　　　若是如今我想在<child-component></child-component>內放置一些內容，結果會是怎樣？

<div id="app">
    <child-component></child-component>

</div>
<script>
    Vue.component('child-component',{
        template:`
            <div>Hello,World!</div>
        `
    })
    let vm = new Vue({
        el:'#app',
        data:{

        }
    })
</script>

 

　　

<child-component>你好</child-component>

 輸出內容仍是在組件中的內容，在 <child-component>內寫的內容沒起做用。

這就是插槽出現的做用。

 

咱們如今給組件增長一個<slot></slot>插槽

咱們在<child-component></child-component>內寫的"你好"起做用了！！！

Vue.component('child-component',{
        template:`
            <div>
            Hello,World!
            <slot></slot>
            </div>
        `
    })

 

到如今，咱們知道了什麼是插槽： 

插槽就是Vue實現的一套內容分發的API，將<slot></slot>元素做爲承載分發內容的出口。

 

這句話的意思就是，沒有插槽的狀況下在組件標籤內些一些內容是不起任何做用的，當我在組件中聲明瞭slot元素後，在組件元素內寫的內容

就會跑到它這裏了！

 

 

2、具名插槽

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

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

而後再<child-component></child-component>內，slot屬性對應的內容都會和組件中name一一對應。

而沒有名字的，就是默認插槽！！

<div id="app">
    <child-component>
        <template slot="girl">
            漂亮、美麗、購物、逛街
        </template>
        <template slot="boy">
            帥氣、才實
        </template>
        <div>
            我是一類人，
            我是默認的插槽
        </div>
    </child-component>
</div>
<script>
    Vue.component('child-component',{
        template:`
            <div>
            <h4>這個世界不只有男人和女人</h4>

            <slot name="girl"></slot>

            <div style="height:1px;background-color:red;"></div>

            <slot name="boy"></slot>

            <div style="height:1px;background-color:red;"></div>

            <slot></slot>
            </div>
        `
    })
    let vm = new Vue({
        el:'#app',
        data:{

        }
    })
</script>

 

3、默認插槽

上面已經介紹過了，這裏不作描述

4、做用域插槽

 

以前一直沒搞懂做用域插槽究竟是什麼！！！

說白了就是我在組件上的屬性，能夠在組件元素內使用！

 

先看一個最簡單的例子！！

咱們給<slot></slot>元素上定義一個屬性say（隨便定義的！），接下來在使用組件child，而後在template元素上添加屬性slot-scope！！隨便起個名字a

咱們把a打印一下發現是 {"say" : "你好"}，也就是slot上面的屬性和值組成的鍵值對！！！

 

這就是做用域插槽！

 

我能夠把組件上的屬性/值，在組件元素上使用！！

 

<div id="app">
    <child>
        <template slot-scope="a">
　　　　　　<!-- {"say":"你好"} -->

            {{a}}
        </template>
    </child>
</div>
<script>
    Vue.component('child',{
        template:`
            <div>
                <slot say="你好"></slot>
            </div>
        `
    })

    let vm = new Vue({
        el:'#app',
        data:{

        }
    })
</script>

 

再看一下下面的例子：

 

 

<div id="app">
    <child :lists="nameList">
        <template slot-scope="a">
            {{a}}
        </template>
    </child>
</div>
<script>
    Vue.component('child',{
        props:['lists'],
        template:`
            <div>
                <ul>
                    <li v-for="list in lists">
                        <slot :bbbbb="list"></slot>
                    </li>
                </ul>
            </div>
        `
    })

    let vm = new Vue({
        el:'#app',
        data:{
            nameList:[
            {id:1,name:'孫悟空'},
            {id:2,name:'豬八戒'},
            {id:3,name:'沙和尚'},
            {id:4,name:'唐僧'},
            {id:5,name:'小白龍'},
            ]
        }
    })
</script>

看一下輸出結果

這太有用了兄弟們！！！

 

這樣我就能夠在這元素上隨便玩了啊！！

當id等於1的時候，我前面加個你好。

我能夠隨便根據這個對象的屬性值進行操做！

<child :lists="nameList">
        <template slot-scope="a">
            <div v-if='a.bbbbb.id==1'>你好：<span>{{a.bbbbb.name}}</span></div>
            <div v-else>{{a.bbbbb.name}}</div>
        </template>
    </child>

 

 

 

最後！若是用過elementui的同窗，必定知道表格就是這樣來的！！

 

表格的本質就是這樣！