什么是插槽
- 插槽（Slot）是Vue提出來的一個概念，正如名字一樣，插槽用于決定將所攜帶的內容，插入到指定的某個位置，從而使模板分塊，具有模塊化的特質和更大的重用性。
- 插槽顯不顯示、怎樣顯示是由父組件來控制的，而插槽在哪里顯示就由子組件來進行控制
默認插槽-1
<!--子組件-->
<template>
<div>
<slot></slot>
<div>slot固有內容</div>
</div>
</template>
<!--父組件-->
<template>
<div class="content">
<div>我是父組件</div>
<named-slot></named-slot>
</div>
</template>
當父組件不在插槽中寫入任何數據時,會只顯示父組件和子組件的默認內容:
默認插槽-1
默認插槽-2
<!--父組件-->
<template>
<div class="content">
<div>我是父組件</div>
<named-slot>
我是父組件中的匿名插槽內容
<div style="color: red">我是父組件中的匿名插槽內容</div>
<el-button>插槽按鈕</el-button>
</named-slot>
</div>
</template>
當需要在子組件slot位置顯示內容時,可以在父組件引入的子組件中寫入想要現實的內容(可以直接寫入內容,或者使用標簽,或者使用其他組件)
默認插槽-2
默認插槽-3
也可以為插槽設置具體的默認內容,它只會在沒有提供內容的時候被渲染
<!--子組件-->
<template>
<div>
<slot>子組件插槽默認內容</slot>
<div>slot固有內容</div>
</div>
</template>
<!--父組件-->
<template>
<div class="content">
<div>我是父組件</div>
<named-slot></named-slot>
</div>
</template>
父組件沒有提供內容時,顯示子組件的插槽默認內容:
默認插槽-3
默認插槽-4
<!--父組件-->
<template>
<div class="content">
<div>我是父組件</div>
<named-slot>
我是父組件中的插槽內容,我會替換子組件slot中的默認內容
</named-slot>
</div>
</template>
父組件提供內容時,子組件的默認內容被父組件提供的內容替換:
默認插槽-4
具名插槽-1
有時候我們需要多個插槽,以把不同的內容顯示在需要的地方
一個不帶 name的 <slot> 出口會帶有隱含的名字“default”。
<!--子組件-->
<template>
<div>
<slot name="header"></slot>
<div>slot固有內容</div>
<slot></slot>
<div>slot固有內容</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>
上面的代碼顯示內容如下:
具名插槽-1
具名插槽-2
在向具名插槽提供內容的時候，我們可以在一個 <template> 元素上使用 v-slot 指令，并以 v-slot 的參數的形式提供其名稱
注意 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>元素中的內容
<!--父組件-->
<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 也有縮寫，即把參數之前的所有內容 (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>
上面代碼顯示為:
具名插槽的縮寫
然而，和其它指令一樣，該縮寫只在其有參數的時候才可用。這意味著以下語法是無效的：
(官網寫會觸發警告,我的頁面直接報錯了......)
<!-- 這樣會觸發一個警告 -->
<named-slot>
<template #>頂部插槽</template>
</named-slot>
所以如果想使用縮寫的話,還是老老實實地寫清楚插槽名稱吧
編譯作用域
父級模板里的所有內容都是在父級作用域中編譯的；子模板里的所有內容都是在子作用域中編譯的。
當你想在一個插槽中使用數據時，例如下例,想在父組件中使用子組件的數據是訪問不到的:
<!--子組件-->
<template>
<div>
<slot></slot>
<div>slot固有內容: {{ child }}</div>
</div>
</template>
<script>
export default {
name: "mySlot",
data() {
return {
child: "子組件屬性"
}
}
}
</script>
<!--父組件-->
<template>
<div class="content">
<div>我是父組件</div>
<named-slot>
<div>我是父組件中的匿名插槽內容: {{ child }}</div>
</named-slot>
</div>
</template>
作用域插槽
有時讓插槽內容能夠訪問子組件中才有的數據是很有用的。
<!--子組件-->
<template>
<div>
<slot :data="user"></slot>
<div>slot固有內容: {{ 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">我是父組件中的匿名插槽內容: {{ slotProps.data.name }}</template>
</named-slot>
</div>
</template>
其中子組件中:data="user"用來把子組件中的user綁定到data上
父組件中slotProps用來接收子組件傳過來的數據,slotProps.data即是子組件傳遞過來的user
上面代碼顯示如下:
作用域插槽
自2.6.0之后,
slot-scope已棄用,所以也可以下面的寫法:
<!--父組件-->
<template>
<div class="content">
<div>我是父組件</div>
<named-slot>
<template v-slot:default="slotProps">我是父組件中的匿名插槽內容: {{ slotProps.data.name }}</template>
</named-slot>
</div>
</template>
獨占默認插槽的縮寫語法
在上述情況下，當被提供的內容只有默認插槽時，組件的標簽才可以被當作插槽的模板來使用。這樣我們就可以把 v-slot 直接用在組件上：
<!--父組件-->
<template>
<div class="content">
<div>我是父組件</div>
<named-slot v-slot:default="slotProps">
我是父組件中的匿名插槽內容: {{ slotProps.data.name }}
</named-slot>
</div>
</template>
這種寫法還可以更簡單。就像假定未指明的內容對應默認插槽一樣，不帶參數的 v-slot 被假定對應默認插槽：
<!--父組件-->
<template>
<div class="content">
<div>我是父組件</div>
<named-slot v-slot="slotProps">
我是父組件中的匿名插槽內容: {{ slotProps.data.name }}
</named-slot>
</div>
</template>
這兩種寫法都可以獲得跟上面一樣的效果:
獨占默認插槽的縮寫語法
注意默認插槽的縮寫語法不能與具名插槽混用,因為他會導致作用域不明確
只要出現多個插槽,請始終為所有的插槽使用完整的基于
<template>的語法
動態插槽名
動態指令參數也可以用在v-slot 上，來定義動態的插槽名：
<!--子組件-->
<template>
<div>
<slot name="header"></slot>
<div>slot固有內容</div>
<slot></slot>
<div>slot固有內容</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賦不同的值,插槽內容會顯示在對應位置
但是下面的寫法會報錯:
<!--父組件-->
<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
}
},
只有注釋掉上面兩行才可以正常顯示,注釋掉第三行不能正常顯示(只剩第一行或第二行都不行),目前還不知道原因,希望知道原因的小伙伴告訴一下
