vue3如何解決slot深層透傳問題
更新時間：2025年04月18日 14:15:00 作者：羊城大主劦
這篇文章主要介紹了vue3如何解決slot深層透傳問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue3解決slot深層透傳問題
問題
組件嵌套導(dǎo)致的層級過深，slot難以傳入到指定組件，一層層傳又低效，并且增加維護(hù)成本。
解決方式
利用 provide 和 inject 及 h() 函數(shù) 以及 vnode 實(shí)現(xiàn)slot透傳
父容器中定義了插槽后，通過 provide 往后傳輸 slot 的虛擬 DOM 節(jié)點(diǎn) (vnode)：
slot組件中使用 inject 接收到父容器傳輸?shù)膕lots后，通過渲染函數(shù) h() 渲染虛擬 DOM 節(jié)點(diǎn) (vnode)，從而實(shí)現(xiàn)slot在任意深層組件使用：
使用方式
任意的深層組件引用slot組件并獲取需要的slot DOM進(jìn)行渲染即可
- 父容器代碼：
<template>
<div class="TablePageBox">
<!--父容器中使用插槽-->
<template v-slot:test="{ arg }">
<span class="slot-a">
{{ arg.code }}
</span>
</template>
</div>
</template>
<script lang="ts">
import { provide, defineComponent } from 'vue';
export default defineComponent({
name: 'box',
setup(ctx: any) {
provide('tableSlots', ctx.slots);
return {};
}
});
</script>
- slot組件代碼：
<script lang="ts">
import { defineComponent, h, inject } from 'vue';
export default defineComponent({
name: 'testSlots',
props: ['prop1', 'prop2'],
setup(props: any, ctx: any) {
return {
props,
ctx
};
},
render(getup: any) {
const { props } = getup;
const template = (inject('testSlots') as any)?.['test'];
return h(template, props);
}
});
</script>總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
IndexedDB 是一個瀏覽器內(nèi)建的數(shù)據(jù)庫,它可以存放對象格式的數(shù)據(jù),默認(rèn)情況下,瀏覽器會將自身所在的硬盤位置剩余容量全部作為indexedDB的存儲容量,本文給大家介紹了Vue3使用indexDB緩存靜態(tài)資源,需要的朋友可以參考下2024-10-10
最近在項(xiàng)目中使用了ElementUI的el-autocomplete,下面這篇文章主要介紹了vue中el-autocomplete支持分頁上拉加載功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
解決VUE項(xiàng)目localhost端口服務(wù)器拒絕連接,只能用127.0.0.1的問題
這篇文章主要介紹了解決VUE項(xiàng)目localhost端口服務(wù)器拒絕連接,只能用127.0.0.1的問題2020-08-08
這篇文章主要為大家介紹了vuex的五個核心概念和基本使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-09-09
這篇文章主要介紹了記一次用vue做的活動頁的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了Vue和React組件之間的傳值方式詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
Vue2.X和Vue3.0數(shù)據(jù)響應(yīng)原理變化的區(qū)別
這篇文章主要介紹了Vue2.X和Vue3.0數(shù)據(jù)響應(yīng)原理變化的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vite+vue3項(xiàng)目中svg圖標(biāo)組件封裝的過程詳解
這篇文章主要介紹了vite+vue3項(xiàng)目中svg圖標(biāo)組件封裝的過程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
這篇文章主要為大家介紹了Vue.nextTick使用方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vue+Koa2+mongoose寫一個像素繪板的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue+Koa2+mongoose寫一個像素繪板的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09