Vue3迁移时原Vue.extend扩展组件的用法该如何正确替换？

核心疑问解答 #

你写的const dialogMain = defineComponent({extends: DialogComponent})写法和原Vue.extend功能完全不一致，无法实现动态生成弹窗的需求：

• defineComponent仅为Vue3提供的类型推导工具函数，返回值是普通组件选项对象，不是Vue2中支持new调用的构造函数
• extends选项的作用仅为继承原有组件的配置，不具备生成可实例化构造器的能力

Vue3 正确实现动态弹窗的方案 #

Vue3中推荐使用createVNode + render的轻量方案实现动态创建组件，完整示例代码如下：

import { createVNode, render } from 'vue'
import DialogComponent from './你的弹窗组件路径.vue'

export const alertDialog = (text: string) => {
  return new Promise((resolve, reject) => {
    // 创建临时挂载容器
    const container = document.createElement('div')
    document.body.appendChild(container)

    // 创建组件VNode，传入props和事件回调
    const dialogVNode = createVNode(DialogComponent, {
      type: 'alert',
      // 假设弹窗组件内部关闭时会emit close事件，绑定回调处理Promise状态
      onClose: (result) => {
        resolve(result)
        // 卸载组件并移除DOM
        render(null, container)
        document.body.removeChild(container)
      },
      // 假设弹窗组件内部取消时会emit cancel事件
      onCancel: () => {
        reject()
        render(null, container)
        document.body.removeChild(container)
      }
    })

    // 渲染组件到容器
    render(dialogVNode, container)
  })
}

扩展组件场景的处理 #

如果需要先扩展原有组件再生成弹窗，直接按如下方式处理即可：

import { defineComponent, createVNode, render } from 'vue'
import DialogComponent from './你的弹窗组件路径.vue'

// 仅做组件配置继承，用于添加自定义逻辑
const ExtendedDialog = defineComponent({
  extends: DialogComponent,
  // 在这里添加你要扩展的属性、方法、生命周期等
  methods: {
    customAlert() {
      console.log('扩展的弹窗方法')
    }
  }
})

export const alertDialog = (text: string) => {
  return new Promise((resolve) => {
    const container = document.createElement('div')
    document.body.appendChild(container)
    // 传入扩展后的组件创建VNode即可
    const dialogVNode = createVNode(ExtendedDialog, {
      type: 'alert',
      onClose: () => {
        resolve(true)
        render(null, container)
        document.body.removeChild(container)
      }
    })
    render(dialogVNode, container)
  })
}

内容的提问来源于stack exchange，提问作者mr_nocoding