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