来个 vue 专家,看下如何操作下这种组件级别的虚拟节点?

Question

基于 el-dialog 自己封装了一个 my-dialog
代码如下

<template>
  <el-dialog>
    <slot
      v-for="slot in Object.keys($slots)"
      :slot="slot"
      :name="slot"
    />
  </el-dialog>
</template>

但是项目中很多代码都是这样的

• index.vue

  <el-dialog>
    <Search/>
  </el-dialog>

• Search.vue

  <template>
  <div>
    <div>body</div>
    这里能保证 会有 slot='footer' 属性
    <span slot="footer" class="add-footer">
      <el-button>取消</el-button>
      <el-button>确定</el-button>
    </span>
  </div>
  </template>

  也就是说 这个 footer 是默认插入在 el-dialog 的 default 插槽的,通过样式去实现的.
  我现在想在 my-dialog中把 footer 节点抽出来 放到 el-dialog 的 footer插槽中,结果如下

  <el-dialog>
    <Search/>
    <span slot="footer" class="add-footer">
      <el-button>取消</el-button>
      <el-button>确定</el-button>
    </span>
  </el-dialog>

  但是 代码量实在太大,有没有大佬能从组件层面出发提供思路的?

以下是我大致的思路,抛砖引玉了

const [slots] = this.$slots.default //拿到默认插槽
const { componentInstance } = slots
if (!componentInstance) return
const vnodes = componentInstance._vnode.children
const footer = vnodes.find(node => node.data?.slot === 'footer') // 拿到 默认插槽中 slot='footer'的节点
this.$slots.footer = [footer] // 把 footer节点 显示的赋值给 footer插槽
this.$forceUpdate()

Answer 1

如果Search组件内又有子组件， 也有slot咋整 你算谁的