vue-組件化-插槽(slot)

理解

Vue組件化中，當咱們在設計一個組件的時候，可能會保留一部分，讓使用者自定義的內容，好比：

1. 導航欄組件中，右上角的分享按鈕，左上角作菜單按鈕
2. 彈出框組件中，彈出框的提示內容等
3. ...

在這種場景下，把保留給使用者的部分，叫作插槽(slot)

插槽分類

匿名插槽

理解：

1. 所謂匿名插槽，就是這個插槽裏，沒有聲明任何名稱，使用者放進來的東西，都扔進這個插槽中。
2. 匿名插槽是一種特殊的具名插槽，也就是名爲default的插槽

寫法：

//自定義組件中
<template>
    <div>
        <slot><slot>//匿名插槽
    </div>
</template>

//頁面(使用者)使用
<template>
    <div>
        <myComponent><p>我被放進了插槽中</p></myComponent>
    </div>
</template>

代碼中我被放進了插槽中這句話，就進入了自定義組件的匿名插槽中，從而變成了

//自定義組件中
<template>
    <div>
        <div>
            <p>我被放進了插槽中</p><!-- 匿名插槽中放入了內容 -->
        </div>
    </div>
</template>

具名插槽

理解：所謂具名插槽，就是這個插槽裏，這個插槽被命了名，使用者放進來的東西，聲明瞭插槽的名稱，會被分發進這個具名插槽中。
寫法：使用template標籤聲明具名插槽名稱<template v-slot:插槽名></template>

//自定義組件中
<template>
    <div>
        <div class='slot1'>
            <slot name='slot1'><slot><!-- 名爲「slot1」的具名插槽 -->
        </div>
        <div class='slot2'>
            <slot name='slot2'><slot><!-- 名爲「slot2」的具名插槽 -->
        </div>
        <slot><slot>//這裏是個匿名插槽
    </div>
</template>

//頁面(使用者)使用
<template>
    <div>
        <myComponent>
            <template v-slot:slot1>
                <p>名爲slot1的具名插槽中</p>
            </template>
            <a>啦啦啦啦德瑪西亞</a>
            <template v-slot:slot2>
                <p>名爲slot2的具名插槽中</p>
            </template>
            <p>啦啦啦啦德瑪西亞</p>
        </myComponent>
    </div>
</template>

代碼被分發到對應插槽後的內容

//自定義組件中
<template>
    <div>
        <div class='slot1'>
            <div>
                <p>名爲slot1的具名插槽中</p>
            </div>
        </div>
        <div class='slot2'>
            <div>
                <p>名爲slot2的具名插槽中</p>
            </div>
        </div>
        <div>
            <a>啦啦啦啦德瑪西亞</a>
            <p>啦啦啦啦德瑪西亞</p>
        </div>
    </div>
</template>

做用域插槽

理解：一種可以將子組件可用的內容暴露給父組件的插槽。
好比：咱們有的時候，須要一些子組件裏的東西，作內容拼接，就像一個用戶名輸入框，咱們但願全部的用戶名，都跟隨一個user_的前綴，此處就能夠使用到做用域插槽

//自定義組件中
<template>
    <div>
        <slot :user='username'><slot>//匿名插槽
    </div>
</template>
<script>
    export default {
        data(){
            return {
                username:{
                    prefix:"user_"
                }
            }
        }
    }
</script>

//頁面(使用者)使用
<template>
    <div>
        <myComponent v-slot='obj'>
            {{obj.user.prefix}}小寒大人
        </myComponent>
    </div>
</template>

編譯後的結果就變成了

<template>
    <div>
        <div>
            user_小寒大人
        </div>
    </div>
</template>

默認值(後備內容)

理解

插槽是擁有默認值功能的，若是對應的slot沒有傳入內容，則會使用slot的默認值

寫法

以匿名參數爲例

//自定義組件中
<template>
    <div>
        <slot><p>這裏是默認的內容</p></slot>
    </div>
</template>

//頁面(使用者)使用
<template>
    <div>
        <myComponent></myComponent>
        <myComponent>替換了</myComponent>
    </div>
</template>

最終表現結果爲

<template>
    <div>
        <div>
            <p>這裏是默認的內容</p>
        </div>  
        <div>
            替換了
        </div>
    </div>
</template>

動態插槽名

理解

能夠使用動態值來定某些內容進入某些具名插槽中

寫法

正常的具名插槽爲v-slot:插槽名，動態的寫法爲v-slot:[dynamicSlotName]，此寫法僅在vue2.6.0後的vue中版本使用

簡寫插槽名

正常的具名插槽爲v-slot:插槽名，簡寫的寫法爲#插槽名，此寫法僅在vue2.6.0後vue中版本使用