欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3如何解決slot深層透傳問題

 更新時(shí)間：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)文章

最新評論