如何在自定义编程式组件中使用Vuetify 3？解决对话框调用报错

问题原因 #

直接通过h()和render()手动创建并挂载组件时，生成的VNode没有关联到Vue应用的上下文，导致Vuetify组件无法获取到它依赖的defaults实例，从而抛出错误。

修正后的代码示例 #

1. 全局对话框插件文件（dialog.js） #

import { h, render } from 'vue'
import Dialog from './dialog.vue'

export default {
  install: (app) => {
    const instance = createInstance(app)
    app.config.globalProperties.$dialog = instance
    app.provide('$dialog', instance)
  },
}

function createInstance(app) {
  return {
    open(message) {
      // 创建独立容器避免污染body
      const container = document.createElement('div')
      document.body.appendChild(container)

      const componentInstance = createComponent(app, Dialog, { message }, container)
      
      // 重写dismiss方法，销毁时清理容器
      const originalDismiss = componentInstance.ctx.dismiss
      componentInstance.ctx.dismiss = () => {
        originalDismiss()
        setTimeout(() => {
          render(null, container)
          document.body.removeChild(container)
        }, 300)
      }

      return {
        dismiss: componentInstance.ctx.dismiss
      }
    }
  }
}

function createComponent(app, component, props, parent, slots = {}) {
  const vNode = h(component, props, slots)
  // 关键：将应用上下文绑定到VNode，让Vuetify能获取到所需实例
  vNode.appContext = app._context
  render(vNode, parent)
  return vNode.component
}

2. 对话框组件文件（dialog.vue） #

<template>
  <v-dialog v-model="dialog" persistent width="auto">
    <v-card>
      <v-card-text class="pa-4">{{ message }}</v-card-text>
      <v-card-actions class="justify-end px-4 pb-4">
        <v-btn @click="dismiss" color="primary" variant="flat">关闭</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Dialog',
  props: {
    message: { 
      type: String, 
      required: true 
    },
  },
  data: () => ({ 
    dialog: true 
  }),
  methods: {
    dismiss() {
      this.dialog = false
    },
  },
})
</script>

3. 主入口文件（main.js） #

import { createApp } from 'vue'
import App from './App.vue'
import { createVuetify } from 'vuetify'
import 'vuetify/styles'
import dialogPlugin from './dialog.js'

const vuetify = createVuetify()
const app = createApp(App)

app.use(vuetify)
app.use(dialogPlugin)
app.mount('#app')

关键说明 #

• 给手动创建的VNode绑定appContext = app._context，确保组件能继承应用的Vuetify上下文，解决实例找不到的问题。
• 使用独立容器挂载对话框，避免直接操作document.body导致的DOM污染，销毁时同步移除容器。
• 重写dismiss方法，添加延迟销毁逻辑，保证Vuetify对话框的关闭动画正常执行。

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