一文詳解Vue中插槽的具體使用
一、前言
插槽就像放在組件中的占位標(biāo)簽，使用組件時(shí)我們將要放到占位標(biāo)簽處的DOM結(jié)構(gòu)寫入組件標(biāo)簽體中即可。
通俗點(diǎn)來(lái)講，插槽就是在自定義組件中預(yù)留一個(gè)位置，這個(gè)位置的內(nèi)容可以由使用組件的人來(lái)定義，可以通過(guò)屬性等數(shù)據(jù)實(shí)現(xiàn)動(dòng)態(tài)的內(nèi)容展示及交互，具有高度的靈活性，。
二、匿名插槽
義組件時(shí)，在需要由用戶自定義的區(qū)域使用<slot></slot>占位，使用組件時(shí)，在組件的標(biāo)簽之間通過(guò)<template></template>定義要往插槽中填充的內(nèi)容。示例代碼：
定義組件
如果在定義組件時(shí)沒有使用<slot></slot>占位，即使在使用組件時(shí)在組件標(biāo)簽之間定義了內(nèi)容，也會(huì)被忽略。
//定義一個(gè)組件Box
<template>
<div>
<div>這是一個(gè)定義了插槽的組件</div>
<slot></slot>
<div>組件其它內(nèi)容</div>
</div>
</template>使用組件
//使用上面的組件
<Box>
<template>
<div>插槽中展示的內(nèi)容</div>
</template>
</Box>對(duì)應(yīng)關(guān)系
三、后備內(nèi)容
此處所說(shuō)的后備內(nèi)容是官方文檔里面的叫法，實(shí)際上就是指插槽的默認(rèn)值。在定義組件時(shí)，可以在<slot><slot>之間給出插槽的默認(rèn)內(nèi)容，也就是說(shuō)當(dāng)使用插槽時(shí)如果沒有在組件標(biāo)簽內(nèi)定義插槽的內(nèi)容，則默認(rèn)內(nèi)容生效，否則默認(rèn)內(nèi)容不生效。例如：
定義組件插槽設(shè)置默認(rèn)內(nèi)容
//定義一個(gè)組件Box
<template>
<div>
<div>這是一個(gè)定義了插槽的組件</div>
<!-- 通過(guò)slot定義了一個(gè)插槽,并在插槽中給出了默認(rèn)值 -->
<slot>
<div>這是插槽的默認(rèn)內(nèi)容</div>
</slot>
<div>組件其它內(nèi)容</div>
</div>
</template>不使用默認(rèn)值，覆蓋
<Box>
<template>
<div>插槽中展示的內(nèi)容</div>
</template>
</Box>此時(shí)頁(yè)面呈現(xiàn)的內(nèi)容為：
使用默認(rèn)值
<Box></Box>
此時(shí)頁(yè)面呈現(xiàn)的內(nèi)容為：
四、具名插槽（命名插槽）
每個(gè)插槽都有一個(gè)名字，當(dāng)一個(gè)組件中只有一個(gè)插槽時(shí)，我們可以不用指定插槽的名稱，此時(shí)插槽的名稱為：default。如果一個(gè)組件中有多個(gè)插槽，我們必須為每個(gè)插槽制定名稱，否則無(wú)法向插槽填充對(duì)應(yīng)的內(nèi)容。
在組件定義時(shí)為solt制定name屬性，使用組件時(shí)，通過(guò)v-slot:插槽名稱，指定插入到哪個(gè)插槽。v-slot必須使用在template標(biāo)簽上，v-slot:插槽名稱可以簡(jiǎn)寫為#插槽名稱,推薦使用簡(jiǎn)寫。示例：
定義組件
<template>
<div class="box">
<span>我是組件的內(nèi)容</span>
<div class="slots">
<!-- 定義名字為left的插槽 -->
<div class="left">
<slot name="left"></slot>
</div>
<!-- 定義名字為center的插槽 -->
<div class="center">
<slot name="center"></slot>
</div>
<!-- 定義名字為right的插槽 -->
<div class="right">
<slot name="right"></slot>
</div>
</div>
<div>組件其他內(nèi)容</div>
</div>
</template>使用組件
<Box>
<!-- 使用v-slot:插槽名字 -->
<template v-slot:left>
我是left插槽的內(nèi)容
</template>
<!-- 使用#插槽名字 -->
<template #center>
我是center插槽的內(nèi)容
</template>
<template #right>
我是right插槽的內(nèi)容
</template>
</Box>效果展示
五、作用域插槽
定義組件Box
定義組件時(shí)為slot增加了name和data屬性，name為slot的名稱，data為自定義屬性。
<template>
<div class="box">
<span>我是組件的內(nèi)容</span>
<div class="slotBox">
<slot name="slotBox1" :data="list"></slot>
<slot name="slotBox2" :data="list"></slot>
</div>
<div>組件其他內(nèi)容</div>
</div>
</template>
<script>
export default {
name: "slotPiece",
data() {
return {
list: [{
txt: '內(nèi)容1',
id: 1
}, {
txt: '內(nèi)容2',
id: 2
}, {
txt: '內(nèi)容3',
id: 3
}, {
txt: '內(nèi)容4',
id: 4
}]
};
},
}
</script>使用組件
使用組件時(shí)template標(biāo)簽中指令：#slotBox1="data"，其中#slotBox1是：v-slot:slotBox1的縮寫，data中包含了data屬性值，使用時(shí)可以通過(guò)data.data或{ data }解構(gòu)數(shù)據(jù)獲取傳過(guò)來(lái)的消息內(nèi)容，對(duì)其進(jìn)行渲染或修改等操作。
<Box>
<template #slotBox1="data">
<!-- 接收過(guò)來(lái)不解構(gòu)為下面的結(jié)構(gòu)： -->
<div>
<div>我是不解構(gòu)的數(shù)據(jù)</div>
{{ data }}
</div>
<!-- 通過(guò)屬性取值： -->
<div>
<div>通過(guò)屬性取值</div>
{{ data.data }}
</div>
</template>
<!-- 通過(guò){ }結(jié)構(gòu)數(shù)據(jù) -->
<template #slotBox2="{ data }">
<div>
<div>我是解構(gòu)后的數(shù)據(jù)</div>
{{ data }}
<div>使用或修改數(shù)據(jù)</div>
<div v-for="hl in data">內(nèi)容：{{ hl.txt }}</div>
</div>
</template>
</Box>效果展示
以上就是一文詳解Vue中插槽的具體使用的詳細(xì)內(nèi)容，更多關(guān)于Vue插槽的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
JavaScript獲取上傳進(jìn)度的幾種方式實(shí)現(xiàn)
進(jìn)度條的應(yīng)用是為了顯示的告訴用戶文件上傳了多少,本文主要介紹了JavaScript獲取上傳進(jìn)度的幾種方式,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08
Bootstrap每天必學(xué)之工具提示（Tooltip）插件
Bootstrap每天必學(xué)之工具提示（Tooltip）插件，工具提示就是通過(guò)鼠標(biāo)移動(dòng)選定在特定的元素上時(shí)，顯示相關(guān)的提示語(yǔ)，感興趣的小伙伴們可以參考一下2016-04-04
這篇文章主要介紹了ES6 Promise對(duì)象的含義和基本用法,結(jié)合實(shí)例形式分析了Promise的含義、功能、基本用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-06-06
js文本框輸入點(diǎn)回車觸發(fā)確定兼容IE、FF等
js文本框輸入點(diǎn)回車觸發(fā)確定兼容IE、FF等，下面有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下2013-11-11
前端水印技術(shù)常用于防止信息泄露或追溯數(shù)據(jù)來(lái)源,尤其在后臺(tái)管理系統(tǒng)、數(shù)據(jù)可視化平臺(tái)中應(yīng)用廣泛,這篇文章主要介紹了前端水印實(shí)現(xiàn)方案的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2026-06-06
如何實(shí)現(xiàn)從照片中裁切自已的肖像呢？...2007-03-03
錄屏軟件對(duì)于我們來(lái)說(shuō)都不陌生了,本文我們要做的事情是實(shí)現(xiàn)自己的錄屏軟件,載體使用Electron,因?yàn)樗m合錄制桌面的場(chǎng)景,下面我們就來(lái)看看具體實(shí)現(xiàn)方法吧2024-01-01
js實(shí)現(xiàn)做通訊錄的索引滑動(dòng)顯示效果和滑動(dòng)顯示錨點(diǎn)效果
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)做通訊錄的索引滑動(dòng)顯示效果和滑動(dòng)顯示錨點(diǎn)效果。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
javascript trim 去空格函數(shù)實(shí)現(xiàn)代碼
去除字符串左右兩端的空格，在vbscript里面可以輕松地使用 trim、ltrim 或 rtrim，但在js中卻沒有這3個(gè)內(nèi)置方法，需要手工編寫。下面的實(shí)現(xiàn)方法是用到了正則表達(dá)式，效率不錯(cuò)，并把這三個(gè)方法加入String對(duì)象的內(nèi)置方法中去。2008-10-10
JS實(shí)現(xiàn)旋轉(zhuǎn)木馬式圖片輪播效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)旋轉(zhuǎn)木馬式圖片輪播效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01