Vue中插槽slot的使用示例詳解
一、插槽是什么
插槽就是子組件中的提供給父組件使用的一個(gè)占位符，用表示，父組件可以在這個(gè)占位符中填充任何模板代碼，如 HTML、組件等，填充的內(nèi)容會(huì)替換子組件的標(biāo)簽。簡(jiǎn)單理解就是子組件中留下個(gè)“坑”，父組件可以使用指定內(nèi)容來(lái)補(bǔ)“坑”。
插槽（slot）是 vue 為組件的封裝者提供的能力。允許開(kāi)發(fā)者在封裝組件時(shí)，把不確定的、希望由用戶指定的部分定義為插槽。
二、插槽分類(lèi)
2.1 匿名插槽
匿名插槽是最基本的插槽類(lèi)型，它不需要指定名稱。在子組件中，你可以簡(jiǎn)單地在模板中放置一個(gè) 標(biāo)簽，而在父組件中使用該子組件時(shí)，可以插入任何內(nèi)容來(lái)填充這個(gè)插槽。如果父組件沒(méi)有提供任何內(nèi)容，則插槽會(huì)默認(rèn)顯示其內(nèi)部的備用內(nèi)容。
2.2 具名插槽
具名插槽允許你為插槽指定一個(gè)名稱，從而可以在一個(gè)組件中定義多個(gè)插槽，并在父組件中明確地決定內(nèi)容應(yīng)該填充到哪一個(gè)插槽中。在子組件中，通過(guò)為 標(biāo)簽添加 name 屬性來(lái)定義具名插槽。
2.3 作用域插槽
作用域插槽是一種特殊的插槽，它允許子組件向父組件傳遞數(shù)據(jù)，使得父組件可以訪問(wèn)子組件的作用域中的數(shù)據(jù)。這樣，父組件就可以根據(jù)子組件的狀態(tài)來(lái)決定插槽的內(nèi)容。在子組件中，可以通過(guò) 標(biāo)簽的屬性來(lái)傳遞數(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)簽中寫(xiě)內(nèi)容，是不生效的，如：123，指定內(nèi)容123會(huì)被丟棄。
<template>
<div>
<p>我是A組件</p>
<B>123<B/>
</div>
</template>
<script>
import B from './B.vue' //引入B組件
export default {
name:'A',
components:{ //注冊(cè)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>此時(shí)，再在子組件標(biāo)簽中寫(xiě)內(nèi)容，生效
<template>
<div>
<p>我是A組件</p>
<!-- 用B組件標(biāo)簽包裹內(nèi)容，驗(yàn)證slot -->
<B>123</B>
</div>
</template>
<script>
import B from './B.vue'
export default {
name:'A',
components:{
B
},
data(){
return {
}
}
}
</script>上面的例子，組件渲染時(shí)，子組件的會(huì)被替換成123(即指定內(nèi)容)
插槽內(nèi)可以包含任何模板代碼，包括HTML；也可以放其他組件。
后備(默認(rèn))內(nèi)容
有時(shí)為一個(gè)插槽設(shè)置具體的后備 (也就是默認(rèn)的) 內(nèi)容是很有用的，它只會(huì)在沒(méi)有提供內(nèi)容的時(shí)候被渲染。
在B組件中
<template>
<div>
<slot><p>我是B組件</p></slot>
</div>
</template>當(dāng)在父組件中不指定內(nèi)容我是B組件會(huì)被渲染
當(dāng)在父組件中指定內(nèi)容
<B> <p>我是插槽內(nèi)容</p> </B>
則這個(gè)提供的內(nèi)容將會(huì)被渲染從而取代后備內(nèi)容
3.2 具名插槽
具名插槽就是起了名字的插槽。
有時(shí)我們需要多個(gè)插槽，例如當(dāng)我們想使用某種通用模板：
<!-- B.vue -->
<template>
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>一個(gè)不帶 name 的 出口會(huì)帶有隱含的名字“default”，即匿名插槽。
在向具名插槽提供內(nèi)容時(shí)，可以在一個(gè) 元素上使用 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)容都將會(huì)被傳入相應(yīng)的插槽。任何沒(méi)有被包裹在帶有slot 的中的內(nèi)容都會(huì)被視為默認(rèn)插槽的內(nèi)容。
3.3 作用域插槽
3.3.1 使用
讓父組件的插槽內(nèi)容可以訪問(wèn)子組件中的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>在這個(gè)例子中，我們選擇將包含所有插槽 prop 的對(duì)象命名為 data，但你也可以使用任意你喜歡的名字。
到此這篇關(guān)于Vue中插槽slot的使用示例詳解的文章就介紹到這了,更多相關(guān)Vue插槽slot使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue?中?Promise?的then方法異步使用及async/await?異步使用總結(jié)
then?方法是?Promise?中?處理的是異步調(diào)用，異步調(diào)用是非阻塞式的，在調(diào)用的時(shí)候并不知道它什么時(shí)候結(jié)束，也就不會(huì)等到他返回一個(gè)有效數(shù)據(jù)之后再進(jìn)行下一步處理，這篇文章主要介紹了Vue?中?Promise?的then方法異步使用及async/await?異步使用總結(jié),需要的朋友可以參考下2023-01-01
這篇文章主要介紹了優(yōu)化Vue中date format的性能詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
Vue+Springboot實(shí)現(xiàn)接口簽名的示例代碼
這篇文章主要介紹了Vue+Springboot實(shí)現(xiàn)接口簽名的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
Vue3響應(yīng)式高階用法之shallowReadonly()使用
在前端開(kāi)發(fā)中,Vue3的shallowReadonly() API允許開(kāi)發(fā)者創(chuàng)建部分只讀的狀態(tài),這對(duì)于保持頂層屬性不變而內(nèi)部屬性可變的場(chǎng)景非常有用,本文將詳細(xì)介紹?shallowReadonly()?的使用方法及其應(yīng)用場(chǎng)景,具有一定的參考價(jià)值,感興趣的可以了解一下2024-09-09
@change 是 Vue.js 中用于監(jiān)聽(tīng)表單元素值變化的事件處理器,很多組件有@change事件,那到底如何獲取到當(dāng)前的參數(shù)呢？本文給大家詳細(xì)講解,感興趣的朋友一起看看吧2023-11-11
這篇文章主要介紹了基于vue+axios+lrz.js微信端圖片壓縮上傳方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Vite使用unplugin-auto-import實(shí)現(xiàn)vue3中的自動(dòng)導(dǎo)入
本文主要介紹了Vite使用unplugin-auto-import實(shí)現(xiàn)vue3中的自動(dòng)導(dǎo)入,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06
這篇文章主要介紹了Vue獲取頁(yè)面元素的相對(duì)位置的方法示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
ElementUI表單驗(yàn)證validate和validateField的使用及區(qū)別
Element-UI作為前端框架,最常使用到的就是表單驗(yàn)證,下面這篇文章主要給大家介紹了關(guān)于ElementUI表單驗(yàn)證validate和validateField的使用及區(qū)別,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
Vue打包為相對(duì)路徑的具體實(shí)現(xiàn)方法
在Vue.js項(xiàng)目中,構(gòu)建后的資源文件（如CSS、JavaScript文件、圖片等）通常會(huì)被放置在指定的目錄下,為了確保這些文件能夠被正確加載,Vue CLI 提供了配置選項(xiàng)來(lái)指定這些文件的路徑,本文給大家介紹了Vue打包為相對(duì)路徑的具體實(shí)現(xiàn)方法,需要的朋友可以參考下2024-09-09