Vue中插槽slot的使用示例詳解
一、插槽是什么
插槽就是子組件中的提供給父組件使用的一個占位符，用表示，父組件可以在這個占位符中填充任何模板代碼，如 HTML、組件等，填充的內(nèi)容會替換子組件的標(biāo)簽。簡單理解就是子組件中留下個“坑”，父組件可以使用指定內(nèi)容來補“坑”。
插槽（slot）是 vue 為組件的封裝者提供的能力。允許開發(fā)者在封裝組件時，把不確定的、希望由用戶指定的部分定義為插槽。
二、插槽分類
2.1 匿名插槽
匿名插槽是最基本的插槽類型，它不需要指定名稱。在子組件中，你可以簡單地在模板中放置一個 標(biāo)簽，而在父組件中使用該子組件時，可以插入任何內(nèi)容來填充這個插槽。如果父組件沒有提供任何內(nèi)容，則插槽會默認(rèn)顯示其內(nèi)部的備用內(nèi)容。
2.2 具名插槽
具名插槽允許你為插槽指定一個名稱，從而可以在一個組件中定義多個插槽，并在父組件中明確地決定內(nèi)容應(yīng)該填充到哪一個插槽中。在子組件中，通過為 標(biāo)簽添加 name 屬性來定義具名插槽。
2.3 作用域插槽
作用域插槽是一種特殊的插槽，它允許子組件向父組件傳遞數(shù)據(jù)，使得父組件可以訪問子組件的作用域中的數(shù)據(jù)。這樣，父組件就可以根據(jù)子組件的狀態(tài)來決定插槽的內(nèi)容。在子組件中，可以通過 標(biāo)簽的屬性來傳遞數(shù)據(jù)。
三、插槽的基本使用
3.1 匿名插槽
匿名：name默認(rèn)為default
3.1.1 基本使用
父組件
<template>
<div>
<p>我是A組件</p>
</div>
</template>
<script>
export default {
name:'A',
data(){
return {
}
}
}
</script>子組件
<template>
<div>
<p>我是B組件</p>
</div>
</template>
<script>
export default {
name: "B",
data() {
return {};
},
};
</script>在父組件中使用子組件
如果我們想要直接在子組件標(biāo)簽中寫內(nèi)容，是不生效的，如：123，指定內(nèi)容123會被丟棄。
<template>
<div>
<p>我是A組件</p>
<B>123<B/>
</div>
</template>
<script>
import B from './B.vue' //引入B組件
export default {
name:'A',
components:{ //注冊B組件
B
},
data(){
return {
}
}
}
</script>應(yīng)該在子組件中使用插槽slot
<template>
<div>
<p>我是B組件</p>
<!-- 插槽的使用方式 -->
<slot></slot>
</div>
</template>
<script>
export default {
name:'B',
data(){
return {
}
}
}
</script>此時，再在子組件標(biāo)簽中寫內(nèi)容，生效
<template>
<div>
<p>我是A組件</p>
<!-- 用B組件標(biāo)簽包裹內(nèi)容，驗證slot -->
<B>123</B>
</div>
</template>
<script>
import B from './B.vue'
export default {
name:'A',
components:{
B
},
data(){
return {
}
}
}
</script>上面的例子，組件渲染時，子組件的會被替換成123(即指定內(nèi)容)
插槽內(nèi)可以包含任何模板代碼，包括HTML；也可以放其他組件。
后備(默認(rèn))內(nèi)容
有時為一個插槽設(shè)置具體的后備 (也就是默認(rèn)的) 內(nèi)容是很有用的，它只會在沒有提供內(nèi)容的時候被渲染。
在B組件中
<template>
<div>
<slot><p>我是B組件</p></slot>
</div>
</template>當(dāng)在父組件中不指定內(nèi)容我是B組件會被渲染
當(dāng)在父組件中指定內(nèi)容
<B> <p>我是插槽內(nèi)容</p> </B>
則這個提供的內(nèi)容將會被渲染從而取代后備內(nèi)容
3.2 具名插槽
具名插槽就是起了名字的插槽。
有時我們需要多個插槽，例如當(dāng)我們想使用某種通用模板：
<!-- B.vue -->
<template>
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>一個不帶 name 的 出口會帶有隱含的名字“default”，即匿名插槽。
在向具名插槽提供內(nèi)容時，可以在一個 元素上使用 slot 指令，并以 slot 的參數(shù)的形式提供其名稱（當(dāng)然也可以直接放在標(biāo)簽中，如
）：
<!-- A.vue -->
<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)在 元素中的所有內(nèi)容都將會被傳入相應(yīng)的插槽。任何沒有被包裹在帶有slot 的中的內(nèi)容都會被視為默認(rèn)插槽的內(nèi)容。
3.3 作用域插槽
3.3.1 使用
讓父組件的插槽內(nèi)容可以訪問子組件中的data數(shù)據(jù)
子組件
<!-- B.vue -->
<template>
<div>
<p>我是B組件</p>
<!-- 綁定在插槽元素上的attribute為插槽prop -->
<slot :obj="obj"></slot>
</div>
</template>
<script>
export default {
name:'B',
data(){
return {
obj:{
firstName:'leo',
lastName:'lion'
}
}
}
}
</script>父組件
<template>
<div>
<p>我是A組件</p>
<B>
<template slot-scope="data">
{{data.obj.lastName}}
</template >
</B>
</div>
</template>在這個例子中，我們選擇將包含所有插槽 prop 的對象命名為 data，但你也可以使用任意你喜歡的名字。
到此這篇關(guān)于Vue中插槽slot的使用示例詳解的文章就介紹到這了,更多相關(guān)Vue插槽slot使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要來和大家分享一些關(guān)于 Vue3中Hooks封裝的技巧,希望能夠為大家在 Vue 3 項目中更好地利用 Hooks 提供一些思路和實踐經(jīng)驗2023-12-12
cross-env是跨平臺設(shè)置和使用環(huán)境變量的腳本。這篇文章主要介紹了vue中cross-env的使用,需要的朋友可以參考下2019-09-09
使用vue進(jìn)行Lodop打印的一些常用方法小結(jié)
這篇文章主要給大家介紹了關(guān)于使用vue進(jìn)行Lodop打印的一些常用方法,需要進(jìn)行打印功能,Lodop就是實現(xiàn)需求的插件,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
vue項目實現(xiàn)背景顏色以及下劃線從左到右漸變動畫效果
這篇文章主要介紹了vue項目實現(xiàn)背景顏色以及下劃線從左到右漸變動畫效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家詳細(xì)介紹了Vue中用JSON實現(xiàn)刷新界面不影響倒計時，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
下面小編就為大家分享一篇vue 組件 全局注冊和局部注冊的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了.netcore+vue 實現(xiàn)壓縮文件下載功能,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
vue checkbox 全選 數(shù)據(jù)的綁定及獲取和計算方法
下面小編就為大家分享一篇vue checkbox 全選 數(shù)據(jù)的綁定及獲取和計算方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
v-for指令是在模板編譯的代碼生成階段實現(xiàn)的，當(dāng)遍歷數(shù)組或?qū)ο髸r需要使用列表渲染指令v-for。本文主要為大家介紹了v-for指令的基本用法，希望對大家有所幫助2023-04-04
本篇文章主要給大家詳細(xì)代碼講解了vue2.0 elementUI制作面包屑導(dǎo)航欄的過程，對此有興趣的朋友可以學(xué)習(xí)下。2018-02-02