vue中的slot(插槽)

什么是插槽
  • 插槽（Slot）是Vue提出來的一個概念，正如名字一樣，插槽用于決定將所攜帶的內(nèi)容，插入到指定的某個位置，從而使模板分塊，具有模塊化的特質(zhì)和更大的重用性。
  • 插槽顯不顯示、怎樣顯示是由父組件來控制的，而插槽在哪里顯示就由子組件來進行控制
默認插槽-1
<!--子組件-->
<template>
    <div>
        <slot></slot>
        <div>slot固有內(nèi)容</div>
    </div>
</template>

<!--父組件-->
<template>
    <div class="content">
        <div>我是父組件</div>
        <named-slot></named-slot>
    </div>
</template>

當父組件不在插槽中寫入任何數(shù)據(jù)時,會只顯示父組件和子組件的默認內(nèi)容:


默認插槽-1
默認插槽-2
<!--父組件-->
<template>
    <div class="content">
        <div>我是父組件</div>
        <named-slot>
            我是父組件中的匿名插槽內(nèi)容
            <div style="color: red">我是父組件中的匿名插槽內(nèi)容</div>
            <el-button>插槽按鈕</el-button>
        </named-slot>
    </div>
</template>

當需要在子組件slot位置顯示內(nèi)容時,可以在父組件引入的子組件中寫入想要現(xiàn)實的內(nèi)容(可以直接寫入內(nèi)容,或者使用標簽,或者使用其他組件)


默認插槽-2
默認插槽-3

也可以為插槽設(shè)置具體的默認內(nèi)容,它只會在沒有提供內(nèi)容的時候被渲染

<!--子組件-->
<template>
    <div>
        <slot>子組件插槽默認內(nèi)容</slot>
        <div>slot固有內(nèi)容</div>
    </div>
</template>

<!--父組件-->
<template>
    <div class="content">
        <div>我是父組件</div>
        <named-slot></named-slot>
    </div>
</template>

父組件沒有提供內(nèi)容時,顯示子組件的插槽默認內(nèi)容:


默認插槽-3
默認插槽-4
<!--父組件-->
<template>
    <div class="content">
        <div>我是父組件</div>
        <named-slot>
            我是父組件中的插槽內(nèi)容,我會替換子組件slot中的默認內(nèi)容
        </named-slot>
    </div>
</template>

父組件提供內(nèi)容時,子組件的默認內(nèi)容被父組件提供的內(nèi)容替換:


默認插槽-4
具名插槽-1

有時候我們需要多個插槽,以把不同的內(nèi)容顯示在需要的地方
一個不帶 name的 <slot> 出口會帶有隱含的名字“default”。

<!--子組件-->
<template>
    <div>
        <slot name="header"></slot>
        <div>slot固有內(nèi)容</div>
        <slot></slot>
        <div>slot固有內(nèi)容</div>
        <slot name="footer"></slot>
    </div>
</template>

<!--父組件-->
<template>
    <div class="content">
        <div>我是父組件</div>
        <named-slot>
            <div>默認插槽1</div>
            <div slot="footer">底部插槽</div>
            <div slot="header">頂部插槽</div>
            <div>默認插槽2</div>
            <div slot="default">默認插槽3</div>
        </named-slot>
    </div>
</template>

上面的代碼顯示內(nèi)容如下:


具名插槽-1
具名插槽-2

在向具名插槽提供內(nèi)容的時候，我們可以在一個 <template> 元素上使用 v-slot 指令，并以 v-slot 的參數(shù)的形式提供其名稱
注意 v-slot 只能添加在 <template> 上 (只有一種例外情況)
所以父組件的寫法也可以是這樣:

<!--父組件-->
<template>
    <div class="content">
        <div>我是父組件</div>
        <named-slot>
            <template>默認插槽1</template>
            <template v-slot:footer>底部插槽</template>
            <template v-slot:header>頂部插槽</template>
            <template>默認插槽2</template>
        </named-slot>
    </div>
</template>

顯示如下:


具名插槽-2.1

或者寫成這樣:

<!--父組件-->
<template>
    <div class="content">
        <div>我是父組件</div>
        <named-slot>
            <template v-slot:footer>底部插槽</template>
            <template v-slot:header>頂部插槽</template>
            <template v-slot:default>默認插槽3</template>
        </named-slot>
    </div>
</template>

顯示如下:

具名插槽-2.2

當使用v-slot時,只會顯示最后一個帶有v-slot的<template>元素中的內(nèi)容

<!--父組件-->
<template>
    <div class="content">
        <div>我是父組件</div>
        <named-slot>
            <template v-slot:default>默認插槽1</template>
            <template v-slot:footer>底部插槽</template>
            <template v-slot:header>頂部插槽</template>
            <template v-slot:default>默認插槽2</template>
            <template>默認插槽3</template>
        </named-slot>
    </div>
</template>

以上代碼顯示:


具名插槽-2.3
具名插槽的縮寫

跟 v-on 和 v-bind 一樣，v-slot 也有縮寫，即把參數(shù)之前的所有內(nèi)容 (v-slot:) 替換為字符 #。例如 v-slot:header 可以被重寫為 #header:

<!--父組件-->
<template>
    <div class="content">
        <div>我是父組件</div>
        <named-slot>
            <template #default>默認插槽1</template>
            <template #footer>底部插槽</template>
            <template #header>頂部插槽</template>
        </named-slot>
    </div>
</template>

上面代碼顯示為:

具名插槽的縮寫

然而，和其它指令一樣，該縮寫只在其有參數(shù)的時候才可用。這意味著以下語法是無效的：
(官網(wǎng)寫會觸發(fā)警告,我的頁面直接報錯了......)

<!-- 這樣會觸發(fā)一個警告 -->
<named-slot>
    <template #>頂部插槽</template>
</named-slot>

所以如果想使用縮寫的話,還是老老實實地寫清楚插槽名稱吧

編譯作用域

父級模板里的所有內(nèi)容都是在父級作用域中編譯的；子模板里的所有內(nèi)容都是在子作用域中編譯的。
當你想在一個插槽中使用數(shù)據(jù)時，例如下例,想在父組件中使用子組件的數(shù)據(jù)是訪問不到的:

<!--子組件-->
<template>
    <div>
        <slot></slot>
        <div>slot固有內(nèi)容: {{ child }}</div>
    </div>
</template>

<script>
    export default {
        name: "mySlot",
        data() {
            return {
                child: "子組件屬性"
            }
        }
    }
</script>

<!--父組件-->
<template>
    <div class="content">
        <div>我是父組件</div>
        <named-slot>
            <div>我是父組件中的匿名插槽內(nèi)容: {{ child }}</div>
        </named-slot>
    </div>
</template>
作用域插槽

有時讓插槽內(nèi)容能夠訪問子組件中才有的數(shù)據(jù)是很有用的。

<!--子組件-->
<template>
    <div>
        <slot :data="user"></slot>
        <div>slot固有內(nèi)容: {{ user.name }}</div>
    </div>
</template>

<script>
    export default {
        name: "mySlot",
        data() {
            return {
                user: {
                    name: "明妃",
                    age: "18"
                }
            }
        }
    }
</script>

<!--父組件-->
<template>
    <div class="content">
        <div>我是父組件</div>
        <named-slot>
            <template slot-scope="slotProps">我是父組件中的匿名插槽內(nèi)容: {{ slotProps.data.name }}</template>
        </named-slot>
    </div>
</template>

其中子組件中:data="user"用來把子組件中的user綁定到data上
父組件中slotProps用來接收子組件傳過來的數(shù)據(jù),slotProps.data即是子組件傳遞過來的user
上面代碼顯示如下:

作用域插槽

這種寫法還可以使用縮寫寫法，如：

<!--父組件-->
<template>
    <div class="content">
        <div>我是父組件</div>
        <named-slot>
            <template #default="slotProps">我是父組件中的匿名插槽內(nèi)容: {{ slotProps.data.name }}</template>
        </named-slot>
    </div>
</template>

或者有多個插槽（如fotter、header）的話，還可以這樣寫：

<!--父組件-->
<template>
    <div class="content">
        <div>我是父組件</div>
        <named-slot>
            <template #header="slotProps">我是父組件中的header插槽內(nèi)容: {{ slotProps.data.name }}</template>
            <template #fotter="slotProps">我是父組件中的fotter插槽內(nèi)容: {{ slotProps.data.name }}</template>
        </named-slot>
    </div>
</template>

自2.6.0之后,slot-scope已棄用,所以也可以下面的寫法:

<!--父組件-->
<template>
    <div class="content">
        <div>我是父組件</div>
        <named-slot>
            <template v-slot:default="slotProps">我是父組件中的匿名插槽內(nèi)容: {{ slotProps.data.name }}</template>
        </named-slot>
    </div>
</template>
獨占默認插槽的縮寫語法

在上述情況下，當被提供的內(nèi)容只有默認插槽時，組件的標簽才可以被當作插槽的模板來使用。這樣我們就可以把 v-slot 直接用在組件上：

<!--父組件-->
<template>
    <div class="content">
        <div>我是父組件</div>
        <named-slot v-slot:default="slotProps">
            我是父組件中的匿名插槽內(nèi)容: {{ slotProps.data.name }}
        </named-slot>
    </div>
</template>

這種寫法還可以更簡單。就像假定未指明的內(nèi)容對應(yīng)默認插槽一樣，不帶參數(shù)的 v-slot 被假定對應(yīng)默認插槽：

<!--父組件-->
<template>
    <div class="content">
        <div>我是父組件</div>
        <named-slot v-slot="slotProps">
            我是父組件中的匿名插槽內(nèi)容: {{ slotProps.data.name }}
        </named-slot>
    </div>
</template>

這兩種寫法都可以獲得跟上面一樣的效果:

獨占默認插槽的縮寫語法

注意默認插槽的縮寫語法不能與具名插槽混用,因為他會導致作用域不明確
只要出現(xiàn)多個插槽,請始終為所有的插槽使用完整的基于<template>的語法

動態(tài)插槽名

動態(tài)指令參數(shù)也可以用在v-slot 上，來定義動態(tài)的插槽名：

<!--子組件-->
<template>
    <div>
        <slot name="header"></slot>
        <div>slot固有內(nèi)容</div>
        <slot></slot>
        <div>slot固有內(nèi)容</div>
        <slot name="footer"></slot>
    </div>
</template>

<!--父組件-->
<template>
    <div class="content">
        <div>我是父組件</div>
        <named-slot>
            <template v-slot:[slotNameC]>看看插槽位置</template>
        </named-slot>
    </div>
</template>

data() {
    return{
        slotNameC: "footer",    // footer,header,default
    }
},

給slotNameC賦不同的值,插槽內(nèi)容會顯示在對應(yīng)位置
但是下面的寫法會報錯:

<!--父組件-->
<template>
    <div class="content">
        <div>我是父組件</div>
        <named-slot>
            <template v-slot:[slotNameA]>默認插槽</template>
            <template v-slot:[slotNameB]>頂部插槽</template>
            <template v-slot:[slotNameC]>底部插槽</template>
        </named-slot>
    </div>
</template>

data() {
    return{
        slotNameA: "default",
        slotNameB: "header",
        slotNameC: "footer",    // footer,header,default
    }
},

只有注釋掉上面兩行才可以正常顯示,注釋掉第三行不能正常顯示(只剩第一行或第二行都不行),目前還不知道原因,希望知道原因的小伙伴告訴一下

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容