Quasar2(Vue3 Options API)中调用动态挂载的全局自定义弹窗组件的方法

你当前遇到的问题核心很简单——你把组件的定义对象挂到了全局属性上，而不是挂载后生成的组件实例，自然无法调用实例上的show方法。

修正后的boot文件代码 #

直接修改boot_dialog.js里的全局属性赋值部分，把挂载返回的组件实例绑定到$dialog上：

import { boot } from 'quasar/wrappers'
import { mount } from 'mount-vue-component'
import customDialog from '../~global/scripts/debug/debug'

export default boot(async ({ app }) => {
  const element = document.createElement('div');
  element.setAttribute('id','modal-dialog-div');
  document.body.appendChild(element);
  
  // 挂载组件，获取返回的vNode等对象
  const { vNode, destroy, el } = mount(customDialog, { 
    app, 
    element, 
    props: { i18n: app.i18n }
  });
  
  // 关键：将组件实例（而非组件定义）赋值给全局属性
  app.config.globalProperties.$dialog = vNode.component;
});

为什么这样改？ #

mount-vue-component返回的vNode对象中，vNode.component就是你挂载的弹窗组件的实例对象，这个实例上才拥有你在组件methods中定义的show方法。之前你赋值的customDialog只是组件的配置选项，并非运行时实例，所以调用this.$dialog.show()会报错。

验证效果 #

现在在项目任意Vue组件中调用：

this.$dialog.show('A sample parameter')

就能正常触发弹窗，并且控制台会打印你传入的参数。

额外提示 #

1. 内存泄漏防范：如果你的应用需要动态卸载弹窗，记得保存destroy方法，在合适的时机（比如应用退出、组件卸载时）调用它清理组件实例和DOM元素。
2. TypeScript类型支持：如果使用TypeScript，需要扩展ComponentCustomProperties类型来让$dialog获得类型提示：

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $dialog: InstanceType<typeof customDialog>;
  }
}
export {};

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