1.看看官網(wǎng)怎么說(shuō)？
在 2.6.0 中箕戳，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€(gè)新的統(tǒng)一的語(yǔ)法 (即 v-slot 指令)狮暑。它取代了 slot 和
slot-scope 這兩個(gè)目前已被廢棄但未被移除且仍在文檔中的 attribute。
Vue 實(shí)現(xiàn)了一套內(nèi)容分發(fā)的 API救恨，這套 API 的設(shè)計(jì)靈感源自 Web Components 規(guī)范草案，將 <slot> 元素作為承載分發(fā)內(nèi)容的出口图毕。
2.分為哪幾種凸椿？
2.1默認(rèn)插槽
木有name的就是默認(rèn)插槽鸟废，捕獲所有未被匹配的內(nèi)容。
<slot>這是默認(rèn)的slot</slot>
定義一個(gè)子組件
Vue.component("test1", {
template: `<div>
Hello,蘇蘇!
<slot>這是默認(rèn)的slot</slot>
</div>`,
});
父組件中
<test1></test1>
此時(shí)的結(jié)果是：
Hello,蘇蘇!這是默認(rèn)的slot
<test1>這是蘇蘇來(lái)了</test1>
此時(shí)的結(jié)果是：
Hello,蘇蘇!這是蘇蘇來(lái)了
當(dāng)插槽有默認(rèn)值的時(shí)候吐葱，重新定義的內(nèi)容將會(huì)覆蓋默認(rèn)內(nèi)容，反之顯示默認(rèn)內(nèi)容倦沧。
2.2具名插槽
有時(shí)我們需要多個(gè)插槽唇撬，<slot> 元素有一個(gè)特殊的 attribute：name。這個(gè) attribute 可以用來(lái)定義額外的插槽展融，一個(gè)不帶 name 的 <slot> 出口會(huì)帶有隱含的名字“default”窖认。
在向具名插槽提供內(nèi)容的時(shí)候，我們可以在一個(gè) <template> 元素上使用 v-slot 指令告希，并以 v-slot 的參數(shù)的形式提供其名稱扑浸，（原語(yǔ)法為slot="定義的名稱"）
定義一個(gè)子組件
Vue.component("test1", {
template: `<div>
Hello,蘇蘇!
<slot name="name" ></slot>
<slot name="age"></slot>
<slot >這是默認(rèn)的slot</slot>
</div>`,
});
父組件
<test1 style="margin: 20px"
>eg：具名插槽的使用 <template slot="name">蘇蘇小蘇蘇111</template
><template slot="age">18歲</template></test1>
輸入內(nèi)容：
Hello,蘇蘇!蘇蘇小蘇蘇11118歲eg：具名插槽的使用
2.3作用域插槽
有時(shí)讓插槽內(nèi)容能夠訪問(wèn)子組件中才有的數(shù)據(jù)是很有用的，綁定在 <slot> 元素上的 attribute 被稱為插槽 prop⊙嗯迹現(xiàn)在在父級(jí)作用域中喝噪，我們可以使用帶值的 v-slot 來(lái)定義我們提供的插槽 prop 的名字。
定義一個(gè)子組件
Vue.component("test1", {
template: `<div>
Hello,蘇蘇!
<slot name="name" play="玩游戲"></slot>
<slot name="age"></slot>
<slot play="玩耍">這是默認(rèn)的slot</slot>
<slot say="說(shuō)哈">這是默認(rèn)的slot</slot>
</div>`,
});
父組件：
<test1 style="margin: 20px"
>eg：作用域插槽使用
<template slot="name" slot-scope="play">Suunto{{ play }}</template></test1
>
輸出：
Hello,蘇蘇! Suunto{ "play": "玩游戲" } eg：作用域插槽使用 eg：作用域插槽使用
父組件：
<test1 style="margin: 20px"
>eg：作用域插槽使用
<template slot="name" slot-scope="{play}">Suunto{{ play }}</template></test1
>
輸出：
Hello,蘇蘇! Suunto玩游戲 eg：作用域插槽使用 eg：作用域插槽使用
3.v-slot的使用
在 2.6.0 中指么，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€(gè)新的統(tǒng)一的語(yǔ)法 (即 v-slot 指令)酝惧。它取代了 slot 和 slot-scope
注意 v-slot 只能添加在 template 上 (或者獨(dú)占默認(rèn)插槽的縮寫(xiě)語(yǔ)法)，這一點(diǎn)和已經(jīng)廢棄的 slot attribute 不同伯诬。
<test1 style="margin: 20px">
<template v-slot:name>這是v-slot使用的具名插槽</template></test1
>
<test1 style="margin: 20px">
<template v-slot:default="{ play }"
>這是v-slot使用的作用域插槽 {{ play }}</template
></test1
>
<test1 style="margin: 20px" v-slot:default="{ play }">
獨(dú)占默認(rèn)插槽的縮寫(xiě)語(yǔ)法：當(dāng)被提供的內(nèi)容只有默認(rèn)插槽時(shí)晚唇，組件的標(biāo)簽才可以被當(dāng)作插槽的模板來(lái)使用---{{ play}}
</test1>
注意默認(rèn)插槽的縮寫(xiě)語(yǔ)法不能和具名插槽混用，因?yàn)樗鼤?huì)導(dǎo)致作用域不明確盗似，只要出現(xiàn)多個(gè)插槽哩陕，請(qǐng)始終為所有的插槽使用完整的基于template 的語(yǔ)法
4. 解構(gòu)插槽 Prop
定義一個(gè)子組件
Vue.component("test2", {
props: ["lists"],
template: `
<div>
<ul>
<li v-for="item in lists">
<slot :item="item"></slot>
</li>
</ul>
</div>
`,
});
父組件
<test2 :lists="list" style="margin: 20px">
<template v-slot="{ item }"> 解構(gòu)： {{ item }} </template>
</test2>
輸出：
解構(gòu)： { "name": "蘇蘇1" }
解構(gòu)： { "name": "蘇蘇2" }
解構(gòu)： { "name": "蘇蘇3" }
解構(gòu)： { "name": "蘇蘇4" }
父組件：重命名
<test2 :lists="list" style="margin: 20px">
<template v-slot="{ item: user }"> 重命名： {{ user.name }} </template>
</test2>
輸出：
重命名： 蘇蘇1
重命名： 蘇蘇2
重命名： 蘇蘇3
重命名： 蘇蘇4
父組件：定義后備內(nèi)容，用于插槽 prop 是 undefined 的情形
<test2 :lists="list" style="margin: 20px">
<template v-slot="{ item = { name: '2332' } }">
定義后備內(nèi)容，用于插槽 prop 是 undefined 的情形： {{ item.name }}
</template>
</test2>
5.動(dòng)態(tài)插槽名
動(dòng)態(tài)指令參數(shù)也可以用在 v-slot 上悍及，來(lái)定義動(dòng)態(tài)的插槽名
<test1 style="margin: 20px">
<template v-slot:[dynamicSlotName]> 動(dòng)態(tài)插槽名--sss </template>
</test1>
...
dynamicSlotName: "name",
輸出：
Hello,蘇蘇! 動(dòng)態(tài)插槽名--sss 這是默認(rèn)的slot 這是默認(rèn)的slot
6.具名插槽的縮寫(xiě)
具名插槽的縮寫(xiě),跟 v-on 和 v-bind 一樣闽瓢，v-slot 也有縮寫(xiě)，即把參數(shù)之前的所有內(nèi)容 (v-slot:) 替換為字符 #心赶。例如 v-slot:header 可以被重寫(xiě)為 #header,然而扣讼，和其它指令一樣，該縮寫(xiě)只在其有參數(shù)的時(shí)候才可用园担，你希望使用縮寫(xiě)的話届谈，你必須始終以明確插槽名取而代之，以#default=開(kāi)始
7.完整代碼
<template>
<div class="contentBox">
<List>
<ListItem>
<ListItemMeta
:avatar="src"
title="什么是插槽"
description="插槽就是Vue實(shí)現(xiàn)的一套內(nèi)容分發(fā)的API弯汰，將<slot></slot>元素作為承載分發(fā)內(nèi)容的出口,沒(méi)有插槽的情況下在組件標(biāo)簽內(nèi)些一些內(nèi)容是不起任何作用"
/>
</ListItem>
<ListItem>
<ListItemMeta
:avatar="src"
title="什么是默認(rèn)插槽"
description=" 木有name的就是默認(rèn)插槽艰山，捕獲所有未被匹配的內(nèi)容"
/>
</ListItem>
<ListItem>
<ListItemMeta
:avatar="src"
title="什么是具名插槽"
description="具名插槽，就是給這個(gè)插槽起個(gè)名字咏闪，如起名一個(gè)為name曙搬，一個(gè)為age，一個(gè)不命名"
/>
</ListItem>
<ListItem>
<ListItemMeta
:avatar="src"
title="什么是作用域插槽"
description="組件上的屬性鸽嫂，可以在組件元素內(nèi)使用纵装，如為slot定義一個(gè)play屬性，使用組件時(shí)候添加屬性slot-scope"
/>
</ListItem>
<ListItem>
<ListItemMeta
:avatar="src"
title="什么是解構(gòu)插槽 Prop"
description="作用域插槽的內(nèi)部工作原理是將你的插槽內(nèi)容包裹在一個(gè)擁有單個(gè)參數(shù)的函數(shù)里据某，可以使用 ES2015 解構(gòu)來(lái)傳入具體的插槽 prop"
/>
</ListItem>
</List>
<test1 style="margin: 20px"></test1>
<test1 style="margin: 20px">eg：插槽的使用</test1>
<test1 style="margin: 20px"
>eg：具名插槽的使用 <template slot="name">蘇蘇小蘇蘇111</template
><template slot="age">18歲</template></test1
>
<test1 style="margin: 20px"
>eg：作用域插槽使用
<template slot="name" slot-scope="play">Suunto{{ play }}</template></test1
>
<test1 style="margin: 20px"
>eg：作用域插槽使用
<template slot="name" slot-scope="{ play }"
>Suunto{{ play }}</template
></test1
>
<div style="margin: 20px; font-weight: bold; font-size: 25px">
作用域插槽使用
</div>
<test2 :lists="list" style="margin: 20px">
<template slot-scope="item">
{{ item }}
</template>
</test2>
<test2 :lists="list" style="margin: 20px">
<template slot-scope="{ item }">
{{ item.name }}
</template>
</test2>
<test2 :lists="list" style="margin: 20px">
<template slot-scope="{ item }">
<div v-if="item.name == '蘇蘇1'">數(shù)據(jù)1</div>
<div v-else>其他數(shù)據(jù)</div>
</template>
</test2>
<div style="margin: 20px; font-weight: bold; font-size: 25px">
v-slot的使用
</div>
<div style="margin: 20px; font-weight: bold; font-size: 20px">
注意 v-slot 只能添加在 template 上
(或者獨(dú)占默認(rèn)插槽的縮寫(xiě)語(yǔ)法)橡娄，這一點(diǎn)和已經(jīng)廢棄的 slot attribute 不同。
</div>
<test1 style="margin: 20px">
<template v-slot:name>這是v-slot使用的具名插槽</template></test1
>
<test1 style="margin: 20px">
<template v-slot:default="{ play }"
>這是v-slot使用的作用域插槽 {{ play }}</template
></test1
>
<test1 style="margin: 20px" v-slot:default="{ play }">
獨(dú)占默認(rèn)插槽的縮寫(xiě)語(yǔ)法：當(dāng)被提供的內(nèi)容只有默認(rèn)插槽時(shí)癣籽，組件的標(biāo)簽才可以被當(dāng)作插槽的模板來(lái)使用------{{
play
}}
</test1>
<test1 style="margin: 20px" v-slot="{ play }">
獨(dú)占默認(rèn)插槽的縮寫(xiě)語(yǔ)法：不帶參數(shù)的 v-slot 被假定對(duì)應(yīng)默認(rèn)插槽 -------{{
play
}}
</test1>
<div style="margin: 20px; font-weight: bold; font-size: 20px">
注意默認(rèn)插槽的縮寫(xiě)語(yǔ)法不能和具名插槽混用挽唉，因?yàn)樗鼤?huì)導(dǎo)致作用域不明確，只要出現(xiàn)多個(gè)插槽筷狼，請(qǐng)始終為所有的插槽使用完整的基于
template 的語(yǔ)法
</div>
<div style="margin: 20px; font-weight: bold; font-size: 20px">
解構(gòu)插槽 Prop
</div>
<test2 :lists="list" style="margin: 20px">
<template v-slot="{ item }"> 解構(gòu)： {{ item }} </template>
</test2>
<test2 :lists="list" style="margin: 20px">
<template v-slot="{ item: user }"> 重命名： {{ user.name }} </template>
</test2>
<test2 :lists="list" style="margin: 20px">
<template v-slot="{ item = { name: '2332' } }">
定義后備內(nèi)容瓶籽，用于插槽 prop 是 undefined 的情形： {{ item.name }}
</template>
</test2>
<div style="margin: 20px; font-weight: bold; font-size: 20px">
動(dòng)態(tài)插槽名
</div>
<test1 style="margin: 20px">
<template v-slot:[dynamicSlotName]> 動(dòng)態(tài)插槽名--sss </template>
</test1>
<div style="margin: 20px; font-weight: bold; font-size: 20px">
具名插槽的縮寫(xiě),跟 v-on 和 v-bind 一樣，v-slot
也有縮寫(xiě)埂材，即把參數(shù)之前的所有內(nèi)容 (v-slot:) 替換為字符 #塑顺。例如
v-slot:header 可以被重寫(xiě)為
#header,然而，和其它指令一樣俏险，該縮寫(xiě)只在其有參數(shù)的時(shí)候才可用严拒，你希望使用縮寫(xiě)的話，你必須始終以明確插槽名取而代之竖独，以#default=開(kāi)始
</div>
</div>
</template>
<script>
// 在 2.6.0 中糙俗，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€(gè)新的統(tǒng)一的語(yǔ)法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 這兩個(gè)目前已被廢棄但未被移除且仍在文檔中的 attribute
import Vue from "vue";
Vue.component("test1", {
template: `<div>
Hello,蘇蘇!
<slot name="name" play="玩游戲"></slot>
---這是米----
<slot name="age"></slot>
<slot play="玩耍">這是默認(rèn)的slot</slot>
<slot say="說(shuō)哈">這是默認(rèn)的slot</slot>
</div>`,
});
// 綁定在 <slot> 元素上的 attribute 被稱為插槽 prop
Vue.component("test2", {
props: ["lists"],
template: `
<div>
<ul>
<li v-for="item in lists">
<slot :item="item"></slot>
</li>
</ul>
</div>
`,
});
export default {
data() {
return {
dynamicSlotName: "name",
src: require("@/assets/img/susu.jpg"),
list: [
{
name: "蘇蘇1",
},
{
name: "蘇蘇2",
},
{
name: "蘇蘇3",
},
{
name: "蘇蘇4",
},
],
};
},
};
</script>
<style>
</style>
