Vue插槽slot詳細(xì)介紹(對(duì)比版本變化,避免踩坑)
Vue中的插槽（slot）在項(xiàng)目中用的也是比較多的，今天就來介紹一下插槽的基本使用以及Vue版本更新之后的插槽用法變化。
插槽是什么？
插槽就是子組件中的提供給父組件使用的一個(gè)占位符，用<slot></slot> 表示，父組件可以在這個(gè)占位符中填充任何模板代碼，如 HTML、組件等，填充的內(nèi)容會(huì)替換子組件的<slot></slot>標(biāo)簽。簡單理解就是子組件中留下個(gè)“坑”，父組件可以使用指定內(nèi)容來補(bǔ)“坑”。以下舉例子幫助理解。
怎么使用插槽？
基本用法
現(xiàn)在，有兩個(gè)組件，A與B，分別如下：
A.vue
<template>
<div>
<p>我是A組件</p>
</div>
</template>
<script>
export default {
name:'A',
data(){
return {
}
}
}
</script>B.vue
<template>
<div>
<p>我是B組件</p>
</div>
</template>
<script>
export default {
name:'B',
data(){
return {
}
}
}
</script>將B組件引入A組件里面（此時(shí)B為A的子組件）
<template>
<div>
<p>我是A組件</p>
<B><B/>
</div>
</template>
<script>
import B from './B.vue' //引入B組件
export default {
name:'A',
components:{ //注冊B組件
B
},
data(){
return {
}
}
}
</script>頁面效果如下：
準(zhǔn)備工作完畢，現(xiàn)在，在B組件里面使用插槽（slot）
<template>
<div>
<p>我是B組件</p>
<slot></slot> //插槽的使用方式
</div>
</template>
<script>
export default {
name:'B',
data(){
return {
}
}
}
</script>此時(shí)頁面并無變化（最開始的情況），當(dāng)然，B組件中使用了插槽slot之后，相當(dāng)于留下了一個(gè)“坑”，占了個(gè)位置。 那么如何驗(yàn)證其存在了呢？
此時(shí)，修改A組件里面的代碼
<template>
<div>
<p>我是A組件</p>
<B>
驗(yàn)證插槽是否生效 //用B組件標(biāo)簽包裹內(nèi)容，驗(yàn)證slot
</B>
</div>
</template>
<script>
import B from './B.vue'
export default {
name:'A',
components:{
B
},
data(){
return {
}
}
}
</script>此時(shí)頁面的效果如下：
頁面中多出了在A中用B包裹的內(nèi)容。沒錯(cuò)，這就是插槽的基本使用，是不是很簡單？
Vue 實(shí)現(xiàn)了一套內(nèi)容分發(fā)的 API，這套 API 的設(shè)計(jì)靈感源自 Web Components 規(guī)范草案，將 <slot> 元素作為承載分發(fā)內(nèi)容的出口。
如上面的例子，當(dāng)組件渲染的時(shí)候，<slot></slot> 將會(huì)被替換為“驗(yàn)證插槽是否生效”（即指定內(nèi)容）。插槽內(nèi)可以包含任何模板代碼，包括 HTML：
<template>
<div class="main">
<p>我是A組件</p>
<B>
<span style="color:red">驗(yàn)證插槽是否生效</span> //內(nèi)容為html
</B>
</div>
</template>頁面效果如下：
插槽內(nèi)也可以放其他組件，如此時(shí)再新建一個(gè)組件C：
<template>
<div>
<p>我是C組件</p>
</div>
</template>
<script>
export default {
name:'C',
data(){
return {
}
}
}
</script>在A組件中，將B組件包裹的內(nèi)容換成C組件：
<template>
<div class="main">
<p>我是A組件</p>
<B>
<!-- <span style="color:red">驗(yàn)證插槽是否生效</span> -->
<C /> //插入C組件
</B>
</div>
</template>
<script>
import B from './B.vue'
import C from './C.vue' //引入C組件
export default {
name:'A',
components:{
B,
C //注冊C組件
},
data(){
return {
}
}
}
</script>頁面效果如下：
此時(shí)檢查頁面元素，我們會(huì)發(fā)現(xiàn)，在原本B組件中<slot></slot>的位置，替換成了C組件：
//B.vue
<template>
<div>
<p>我是B組件</p>
<slot></slot>
</div>
</template>
//觀察頁面元素,<slot></slot>被替換成C組件
也印證了開篇對(duì)插槽作用的解釋，即使用<slot></slot>的組件指定的位置留一個(gè)坑，如果在外部，使用其組件包裹某內(nèi)容（可以是任何模板代碼，也可以是HTML，還可以是組件），則該內(nèi)容就會(huì)被分發(fā)到<slot></slot>處（一個(gè)有趣的說法就是把“坑”補(bǔ)上），渲染出來。當(dāng)然，也可以不放任何內(nèi)容，不影響組件渲染，就好比最開始的情況。
注意：如果B組件的 template 中沒有包含一個(gè) <slot> 元素，即不使用插槽，則該組件起始標(biāo)簽和結(jié)束標(biāo)簽之間的任何內(nèi)容都會(huì)被拋棄。例如：
//B.vue
<template>
<div>
<p>我是B組件</p>
<!-- <slot></slot> --> //不使用插槽
</div>
</template>//A.vue
<template>
<div>
<p>我是A組件</p>
<B>
<!-- <span style="color:red">驗(yàn)證插槽是否生效</span> -->
<C />
</B>
</div>
</template>
//此時(shí)在<B></B>包裹的內(nèi)容都會(huì)被拋棄頁面效果如下，在B組件中插入的C組件被拋棄了，因?yàn)锽組件中沒使用插槽：
后備（默認(rèn)）內(nèi)容
有時(shí)為一個(gè)插槽設(shè)置具體的后備 (也就是默認(rèn)的) 內(nèi)容是很有用的，它只會(huì)在沒有提供內(nèi)容的時(shí)候被渲染。例如在B組件中：
<template>
<div>
<slot></slot>
</div>
</template>我們可能希望這個(gè)B組件內(nèi)絕大多數(shù)情況下都渲染文本“我是B組件”。為了將“我是B組件”作為后備內(nèi)容，我們可以將它放在 <slot> 標(biāo)簽內(nèi)：
<template>
<div>
<slot><p>我是B組件</p></slot>
</div>
</template>現(xiàn)在當(dāng)我在一個(gè)父級(jí)組件中使用B組件并且不提供任何插槽內(nèi)容時(shí)：
<B></B>
后備內(nèi)容“我是B組件”將會(huì)被渲染：
但是如果我們提供內(nèi)容：
<B> <p>我是插槽內(nèi)容</p> </B>
則這個(gè)提供的內(nèi)容將會(huì)被渲染從而取代后備內(nèi)容：
具名插槽
所謂具名插槽，顧名思義就是起了名字的插槽。有時(shí)我們需要多個(gè)插槽，例如當(dāng)我們想使用某種通用模板：
<template>
<div>
<header>
<!-- 我們希望把頁頭放這里 -->
</header>
<main>
<!-- 我們希望把主要內(nèi)容放這里 -->
</main>
<footer>
<!-- 我們希望把頁腳放這里 -->
</footer>
</div>
</template>對(duì)于這樣的情況，<slot> 元素有一個(gè)特殊的 attribute：name。這個(gè) attribute 可以用來定義額外的插槽：
//B.vue
<template>
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>一個(gè)不帶 name 的 <slot> 出口會(huì)帶有隱含的名字“default”。
在向具名插槽提供內(nèi)容的時(shí)候，我們可以在一個(gè) <template> 元素上使用 slot 指令，并以 slot 的參數(shù)的形式提供其名稱（當(dāng)然也可以直接放在標(biāo)簽中，如<div slot="header">）：
<template>
<div>
<p>我是A組件</p>
<B>
<template slot="header">
<p>我是header部分</p>
</template>
<p>我是main（默認(rèn)插槽）部分</p>
<template slot="footer">
<p>我是footer部分</p>
</template>
</B>
</div>
</template>現(xiàn)在 <template> 元素中的所有內(nèi)容都將會(huì)被傳入相應(yīng)的插槽。任何沒有被包裹在帶有slot 的 <template> 中的內(nèi)容都會(huì)被視為默認(rèn)插槽的內(nèi)容。
頁面效果如下：
觀察頁面元素，內(nèi)容被放入相應(yīng)名字的插槽中：
Tips：說到這里就不得不提一下，這種方式在項(xiàng)目中比較常用，可以當(dāng)成一個(gè)復(fù)用（通用）模板組件。如多個(gè)組件的布局使用相似模板，只是具體內(nèi)容不同，那么我們可以使用這種插槽方式封裝成一個(gè)通用組件，在其他組件使用的時(shí)候只需要傳對(duì)應(yīng)的內(nèi)容到對(duì)應(yīng)名字的插槽即可，不需要將該模板在每個(gè)組件重新寫一遍，減少代碼冗余，大大提高開發(fā)效率。
作用域插槽
有時(shí)讓插槽內(nèi)容能夠訪問子組件中才有的數(shù)據(jù)是很有用的?，F(xiàn)在，假設(shè)B組件：
<template>
<div>
<p>我是B組件</p>
<slot>{{obj.firstName}}</slot>
</div>
</template>
<script>
export default {
name:'B',
data(){
return {
obj:{
firstName:'leo',
lastName:'lion'
}
}
}
}
</script>我們可能想換掉備用內(nèi)容，用“lion”來顯示。如下，在A組件：
<template>
<div>
<p>我是A組件</p>
<B>
{{obj.lastName}}
</B>
</div>
</template>然而上述代碼不會(huì)正常工作，因?yàn)橹挥蠦組件可以訪問到 obj，而我們提供的內(nèi)容是在父級(jí)渲染的，即在父級(jí)作用域中。頁面并無變化：
為了讓 obj在父級(jí)的插槽內(nèi)容中可用，我們可以將 obj作為 <slot> 元素的一個(gè) attribute 綁定上去：
<template>
<div>
<p>我是B組件</p>
<slot :obj="obj">{{obj.firstName}}</slot>
</div>
</template>綁定在 <slot> 元素上的 attribute 被稱為插槽 prop?，F(xiàn)在在父級(jí)作用域中，我們可以使用帶值的 slot-scope 來定義我們提供的插槽 prop 的名字：
<template>
<div class="main">
<p>我是A組件</p>
<B>
<template slot-scope="data">
{{data.obj.lastName}}
</template>
</B>
</div>
</template>在這個(gè)例子中，我們選擇將包含所有插槽 prop 的對(duì)象命名為 data，但你也可以使用任意你喜歡的名字。此時(shí)頁面效果如下：
如果你有使用過ElementUI里面的表格el-table，當(dāng)改變某一列展示的字段時(shí)，我們經(jīng)常使用：
<el-table-column>
<template slot-scope="scope">
<span>{{scope.row.xxx}}</span>
</template>
</el-table-column>插槽版本變化
v-slot 指令自 Vue 2.6.0 起被引入，提供更好的支持 slot 和 slot-scope attribute 的 API 替代方案。v-slot 完整的由來參見這份 RFC。在接下來所有的 2.x 版本中 slot 和 slot-scope attribute 仍會(huì)被支持，但已經(jīng)被官方廢棄且不會(huì)出現(xiàn)在 Vue 3 中。也就是說，在vue2版本中，我們?nèi)钥梢允褂胹lot跟slot-scope，但是在vue3中就只能使用v-slot了。
原來的帶有slot的具名插槽
//B.vue
<template>
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>寫法變化，使用v-slot
<template>
<div>
<p>我是A組件</p>
<B>
<template v-slot:header>
<p>我是header部分</p>
</template>
<p>我是main（默認(rèn)插槽）部分</p>
<template v-slot:footer>
<p>我是footer部分</p>
</template>
</B>
</div>
</template>原來的作用域插槽
<template>
<div class="main">
<p>我是A組件</p>
<B>
<template slot-scope="data">
{{data.obj.lastName}}
</template>
</B>
</div>
</template>寫法變化，使用v-slot
<template>
<div class="main">
<p>我是A組件</p>
<B>
<template v-slot="data">
{{data.obj.lastName}}
</template>
</B>
</div>
</template>在 2.6.0 中，為具名插槽和作用域插槽引入了一個(gè)新的統(tǒng)一的語法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 這兩個(gè)目前已被廢棄但未被移除且仍在文檔中的 attribute。新語法的由來可查閱這份 RFC。注意slot版本變化，vue2中仍可以使用slot與slot-scope，但是vue3只能使用v-slot了，切記，避免踩坑。
總結(jié)
到此這篇關(guān)于Vue插槽slot詳細(xì)介紹的文章就介紹到這了,更多相關(guān)Vue插槽slot介紹內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue mixins組件復(fù)用的幾種方式（小結(jié)）
這篇文章主要介紹了vue mixins組件復(fù)用的幾種方式（小結(jié)）,vue中提供了一種混合機(jī)制mixins，用來更高效的實(shí)現(xiàn)組件內(nèi)容的復(fù)用,有興趣的可以了解一下2017-09-09
插槽（Slot）是Vue提出來的一個(gè)概念，正如名字一樣，插槽用于決定將所攜帶的內(nèi)容，插入到指定的某個(gè)位置，從而使模板分塊，具有模塊化的特質(zhì)和更大的重用性。2020-02-02
Vue實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
Vue是構(gòu)建Web界面的JavaScript庫，原稱為Vue.js，它可以通過簡潔的API來提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)，本文詳細(xì)介紹了Vue的使用安裝和相關(guān)知識(shí)，有興趣的同學(xué)可以參考借鑒2023-03-03
關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解
computed是vue的配置選項(xiàng),它的值是一個(gè)對(duì)象,其中可定義多個(gè)計(jì)算屬性,每個(gè)計(jì)算屬性就是一個(gè)函數(shù),下面這篇文章主要給大家介紹了關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解,需要的朋友可以參考下2022-07-07
Vue3?$emit用法指南(含選項(xiàng)API、組合API及?setup?語法糖)
這篇文章主要介紹了Vue3?$emit用法指南,使用?emit，我們可以觸發(fā)事件并將數(shù)據(jù)傳遞到組件的層次結(jié)構(gòu)中，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue中el-upload上傳圖片到七牛的示例代碼,實(shí)現(xiàn)思路其實(shí)也很簡單，需要從后臺(tái)獲取七牛token上傳圖片到七牛，具體示例代碼大家跟隨小編一起學(xué)習(xí)吧2018-10-10
這篇文章主要介紹了15分鐘上手vue3.0，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了vue如何獲取當(dāng)前url地址加端口號(hào)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
這篇文章主要介紹了vue 子組件和父組件傳值的示例，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-09-09