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

Z时代
2024-03-04
分类：IT

基于 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()