vue3如何解決slot深層透傳問題
更新時間：2025年04月18日 14:15:00 作者：羊城大主劦
這篇文章主要介紹了vue3如何解決slot深層透傳問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue3解決slot深層透傳問題
問題
組件嵌套導(dǎo)致的層級過深，slot難以傳入到指定組件，一層層傳又低效，并且增加維護成本。
解決方式
利用 provide 和 inject 及 h() 函數(shù) 以及 vnode 實現(xiàn)slot透傳
父容器中定義了插槽后，通過 provide 往后傳輸 slot 的虛擬 DOM 節(jié)點 (vnode)：
slot組件中使用 inject 接收到父容器傳輸?shù)膕lots后，通過渲染函數(shù) h() 渲染虛擬 DOM 節(jié)點 (vnode)，從而實現(xiàn)slot在任意深層組件使用：
使用方式
任意的深層組件引用slot組件并獲取需要的slot DOM進行渲染即可
- 父容器代碼：
<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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了vue實現(xiàn)echarts中的儀表盤，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要給大家介紹了關(guān)于vue-router路由懶加載及實現(xiàn)的3種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-02-02
vue實現(xiàn)給div綁定keyup的enter事件
這篇文章主要介紹了vue實現(xiàn)給div綁定keyup的enter事件，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Proxy是ES6引入的一個新特性，它允許你創(chuàng)建一個代理對象，用于攔截對目標對象的訪問，但用了這么久的vue3，你真的懂Proxy嗎，本文就來和大家深入聊聊Proxy吧2023-06-06
這篇文章主要介紹了vue 中url 鏈接左邊的小圖標更改問題，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
vue單頁應(yīng)用加百度統(tǒng)計代碼（親測有效）
這篇文章主要介紹了vue單頁應(yīng)用加百度統(tǒng)計代碼的解決方法，需要的朋友參考下吧2018-01-01
這篇文章主要介紹了vue element 表頭添加斜線的實現(xiàn)代碼,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-11-11
uniapp實現(xiàn)APP、小程序與webview頁面間通訊的實現(xiàn)步驟
這篇文章主要介紹了uniapp實現(xiàn)APP、小程序與webview頁面間通訊的實現(xiàn)步驟,在Uniapp開發(fā)的APP或小程序頁面中嵌入一個H5網(wǎng)頁,并實現(xiàn)H5頁面與APP之間的數(shù)據(jù)傳遞,需要的朋友可以參考下2025-01-01
這篇文章主要為大家介紹了vite中使用@配置路徑別名過程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
這篇文章主要為大家介紹了vue項目實現(xiàn)搜索內(nèi)容變紅色顯示，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12