Vue3 插槽使用匯總
一、v-slot 介紹
v-slot 只能用在 template 或組件上使用，否則就會(huì)報(bào)錯(cuò)。
v-slot 也是其中一種指令。
使用示例：
//父組件代碼 <child-com> <template v-slot:nameSlot> 插槽內(nèi)容 </template> </child-com> //組件模板 <slot name="nameSlot"></slot> v-slot 的語法，簡化 slot、slot-scope 作用域插槽的功能，相比更加強(qiáng)大，代碼效率更高。
二、匿名插槽
當(dāng)組件中只有一個(gè)插槽的時(shí)候，可以不設(shè)置 slot 的 name 屬性，v-slot 后可以不帶參數(shù)，但是 v-slot 在沒有設(shè)置 name 屬性的插槽口也會(huì)帶有隱含的 “default”。
匿名插槽使用：
//組件調(diào)用 <child-com> <template v-slot> 插槽內(nèi)容 </template> </child-com> //組件模板 <slot ></slot>
雖然 v-slot 沒有設(shè)置參數(shù)，但不能刪除掉 ，否則插槽內(nèi)容無法正常渲染。
三、具名插槽
一個(gè)組件中有多個(gè)插槽的時(shí)候，如果沒有設(shè)置 v-slot 屬性值，會(huì)默認(rèn)把元素插到?jīng)]有設(shè)置 name 屬性值的 slot 組件中，為了把對(duì)應(yīng)的元素放到指定的位置，就需要借助 v-slot 和 name 屬性，把內(nèi)容對(duì)應(yīng)起來。
具名插槽使用：
//父組件
<child-com>
<template v-slot:header>
頭部
</template>
<template v-slot:body>
內(nèi)容
</template>
<template v-slot:footer>
腳
</template>
</child-com>
//子組件
<div>
<slot name="header"></slot>
<slot name="body"></slot>
<slot name="footer"></slot>
</div>
具名插槽縮寫：
v-slot 與 v-bind、v-on 指令一樣，也存在縮寫。可以把 v-slot: 簡寫為 # 號(hào)。
如上述 v-slot:footer 可以簡寫為 #footer 。
上述的父組件代碼可以簡化為：
<child-com> <template #header> 頭部 </template> <template #body> 內(nèi)容 </template> <template #footer> 腳 </template> </child-com>
注意：和其他指令一樣，只有存在參數(shù)時(shí)，才可以簡寫，否則是無效的。
四、作用域插槽
有時(shí)讓插槽內(nèi)容能夠訪問子組件中才有的數(shù)據(jù)是很有用的。當(dāng)一個(gè)組件被用來渲染一個(gè)項(xiàng)目數(shù)組時(shí)，這是一個(gè)常見的情況，我們希望能夠自定義每個(gè)項(xiàng)目的渲染方式。
要使子組件上的屬性在插槽內(nèi)容上可用，需要給 slot 綁定一個(gè)屬性。然后在 v-slot 處接收并定義提供插槽 props 名字。
使用示例：
//
<child-com>
<template v-slot:header="slotProps">
插槽內(nèi)容--{{ slotProps.item }} 序號(hào)--{{ slotProps.index }}
</template>
</child-com>
//子組件代碼
<template>
<div v-for="(item, index) in arr" :key="index">
<slot :item="item" name="header" :index="index"></slot>
</div>
</template>
<script setup>
const arr = ['1111', '2222', '3333']
</script>
五、動(dòng)態(tài)插槽名
v-slot 指令參數(shù)也可以是動(dòng)態(tài)的，用來定義動(dòng)態(tài)插槽名。
如：
<child-com>
<template v-slot:[dd()]>
動(dòng)態(tài)插槽名
</template>
</child-com>
<script setup>
const dd = () => {
return 'hre'
}
此處使用的是函數(shù)，也可以直接使用變量。
到此這篇關(guān)于Vue3 插槽使用匯總的文章就介紹到這了,更多相關(guān)Vue3 插槽使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue項(xiàng)目如何從session中獲取對(duì)象,并且使用里面的屬性
這篇文章主要介紹了vue項(xiàng)目如何從session中獲取對(duì)象,并且使用里面的屬性問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
這篇文章主要介紹了vue使用websocket連接優(yōu)化性能方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vite項(xiàng)目如何集成eslint和prettier
這篇文章主要介紹了vite項(xiàng)目如何集成eslint和prettier問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
vue2中的keep-alive使用總結(jié)及注意事項(xiàng)
vue2.0提供了一個(gè)keep-alive組件用來緩存組件,避免多次加載相應(yīng)的組件,減少性能消耗。本文給大家介紹vue2中的keep-alive使用總結(jié)及注意事項(xiàng)，需要的朋友參考下吧2017-12-12
vue-cli 3.0 引入mint-ui報(bào)錯(cuò)問題及解決
這篇文章主要介紹了vue-cli 3.0 引入mint-ui報(bào)錯(cuò)問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue+Element實(shí)現(xiàn)動(dòng)態(tài)生成新表單并添加驗(yàn)證功能
這篇文章主要介紹了Vue+Element實(shí)現(xiàn)動(dòng)態(tài)生成新表單并添加驗(yàn)證功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
本文主要介紹了一文詳解Vue中加上key后發(fā)生什么，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
在Vue 中,可以使用 props 向子組件傳遞數(shù)據(jù)，下面這篇文章主要給大家介紹了關(guān)于vue父組件通過props如何向子組件傳遞方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
去除Element-Plus下拉菜單邊框的實(shí)現(xiàn)步驟
Element-Plus 是 Element UI 的 Vue 3 版本,它提供了一套完整的組件庫,在使用 Element-Plus 進(jìn)行開發(fā)時(shí),我們可能會(huì)遇到需要自定義組件樣式的情況,本文將介紹如何使用 CSS 來去除 Element-Plus 下拉框的邊框,需要的朋友可以參考下2024-03-03
vue.js項(xiàng)目 el-input 組件 監(jiān)聽回車鍵實(shí)現(xiàn)搜索功能示例
今天小編就為大家分享一篇vue.js項(xiàng)目 el-input 組件 監(jiān)聽回車鍵實(shí)現(xiàn)搜索功能示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08