Vue 3 中动态创建并控制 Modal 组件实例的正确实践-js教程-PHP中文网

Vue 3 中动态创建并控制 Modal 组件实例的正确实践

本文详解如何在 Vue 3 中替代 Vue 2 的 new Vue({ extends: Component }) 和 $on/$destroy/$mount 模式，通过 createApp + Teleport + defineExpose 实现可编程调用的 Modal（如 showPrompt），兼顾类型安全、响应式控制与上下文完整性。

本文详解如何在 vue 3 中替代 vue 2 的 new vue({ extends: component }) 和 $on/$destroy/$mount 模式，通过 createapp + teleport + defineexpose 实现可编程调用的 modal（如 showprompt），兼顾类型安全、响应式控制与上下文完整性。

在 Vue 3 中，直接 new 组件实例、手动挂载、使用 $on 或 $destroy 已被彻底移除——这不仅是 API 变更，更是设计理念升级：Vue 3 推崇声明式、组合式、受控的组件生命周期管理，而非命令式 DOM 操作。因此，重构 showPrompt 函数的关键在于 放弃“手动实例化”，转向“动态挂载 + 显式暴露 + Promise 驱动”模式。

✅ 推荐方案：`createApp` + `Teleport` + `defineExpose` + `Promise`

步骤 1：改造 Modal 组件，显式暴露控制接口

<!-- @/layouts/Modal.vue -->
<script setup lang="ts">
import { ref, onUnmounted } from 'vue'

// 声明 props（支持 v-model:visible）
const props = defineProps<{
  visible?: boolean
  positiveButtonColor?: string
  showPositiveButton?: boolean
  contentSlotPaddingClass?: string
  positiveButtonText?: string
}>()

const emit = defineEmits<{
  (e: 'update:visible', value: boolean): void
  (e: 'confirm'): void
  (e: 'cancel'): void
  (e: 'closed'): void
}>()

const isVisible = ref(props.visible ?? false)

// 同步 prop.visible → internal state
watch(() => props.visible, (val) => {
  isVisible.value = val ?? false
})

// 同步 internal state → parent via v-model
const updateVisible = (value: boolean) => {
  isVisible.value = value
  emit('update:visible', value)
}

// 暴露关键方法供外部调用
defineExpose({
  show: () => updateVisible(true),
  hide: () => updateVisible(false),
  confirm: () => emit('confirm'),
  cancel: () => emit('cancel'),
})
</script>

✅ 优势：defineExpose 精准控制外部可访问能力；v-model:visible 兼容父组件双向绑定；无副作用、可测试、类型完整。

步骤 2：实现类型安全的 `showPrompt` 工厂函数

// utils/modal.ts
import { createApp, Teleport, ref, onMounted, onUnmounted } from 'vue'
import Modal from '@/layouts/Modal.vue'

interface PromptOptions {
  positiveButtonColor?: string
  showPositiveButton?: boolean
  contentSlotPaddingClass?: string
  positiveButtonText?: string
  // 扩展任意其他 props
  [key: string]: any
}

export function showPrompt(options: PromptOptions = {}): Promise {
  return new Promise((resolve) => {
    // 1. 创建容器元素（挂载点）
    const container = document.createElement('div')
    container.className = 'modal-prompt-container'
    document.body.appendChild(container)

    // 2. 构建 props（含默认值与逻辑）
    const props = {
      ...options,
      positiveButtonColor: options.positiveButtonText === 'Yes' 
        ? 'primary' 
        : options.positiveButtonColor ?? 'error',
      showPositiveButton: options.showPositiveButton ?? true,
      contentSlotPaddingClass: options.contentSlotPaddingClass ?? 'pa-0',
      visible: true, // 初始显示
    }

    // 3. 创建独立 app 实例（注入必要插件，如 i18n/vuetify）
    const app = createApp({
      setup() {
        const modalRef = ref<instancetype modal> | null>(null)

        onMounted(() => {
          // 确保 Modal 实例就绪后调用 show（防竞态）
          setTimeout(() => {
            modalRef.value?.show()
          }, 0)
        })

        const handleConfirm = () => {
          resolve('confirm')
          cleanup()
        }

        const handleCancel = () => {
          resolve('cancel')
          cleanup()
        }

        const handleClose = () => {
          // 支持 Modal 内部关闭（如点击遮罩）
          resolve('cancel')
          cleanup()
        }

        const cleanup = () => {
          if (modalRef.value) {
            modalRef.value.hide()
          }
          setTimeout(() => {
            app.unmount()
            container.remove()
          }, 300) // 匹配 fade-out 动画时长
        }

        return () => h(
          Teleport,
          { to: container },
          h(Modal, {
            ...props,
            ref: modalRef,
            'onUpdate:visible': (v: boolean) => !v && handleClose(),
            onConfirm: handleConfirm,
            onCancel: handleCancel,
            onClosed: handleClose,
          })
        )
      }
    })

    // ⚠️ 关键：手动注入全局插件（如 Vuetify、i18n）
    // app.use(vuetify).use(i18n) // 根据项目实际注入

    // 4. 挂载
    app.mount(container)
  })
}</instancetype>

✅ 使用示例（TypeScript 安全）

// 在任意 Composition API setup 中调用
async function handleDelete() {
  try {
    const result = await showPrompt({
      title: '确认删除？',
      content: '此操作不可撤销。',
      positiveButtonText: 'Yes',
      positiveButtonColor: 'error'
    })

    if (result === 'confirm') {
      await api.deleteItem()
      console.log('已删除')
    }
  } catch (e) {
    console.error('Prompt 被中断', e)
  }
}

⚠️ 注意事项与避坑指南

不要尝试 new Modal()：Vue 3 组件不是构造函数，无法 new；defineComponent 返回的是描述对象，非类实例。
避免丢失上下文：createApp 默认无插件，务必显式 .use(...) 注入 i18n、vuetify、pinia 等，否则组件内 useI18n() 将报错。
内存与 DOM 清理：必须 app.unmount() + container.remove()，否则造成内存泄漏和重复挂载。
事件监听替代 $on：Vue 3 使用 onXXX prop（如 onConfirm）或 v-on:confirm，语义清晰且类型推导完备。
响应式 props 同步：通过 watch 监听 props.visible 并同步 isVisible，确保外部控制权不丢失。