如何在 Quasar 2 中调用动态创建/挂载的全局组件（Vue 3 - 选项 API）

Question

我不太确定如何表述这个问题。我正在尝试将我的 Vue2 全局组件之一移植到 Vue3（选项 API）。简而言之，我正在尝试全局安装自定义对话框组件，即在引导文件夹中创建它（并将其添加到 quasar.conf.js 引导部分），然后能够在我的任何 Vue 文件中调用它项目，而不必在每个 vue 文件中导入它，即类似于 this.$axios.

使用早期版本的Vue的原始插件文件类似于

import Vue from 'vue';
import dialog from '@/components/dialog.vue';

export default ({ app }, inject) => {
    const $dialog = Vue.extend( dialog );
    const vm = new $dialog({ i18n: app.i18n }).$mount();
    document.body.appendChild(vm.$el);

    inject('dialog', vm);
};

我找到了解决 Vue.extend and used a component that implements the suggested solution by pearofducks 在 github 上的弃用问题的答案，这似乎正确地安装了组件。

回到我的引导文件

boot_dialog.js

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);
  const { vNode, destroy, el } = mount(customDialog, { app, element, props: { i18n: app.i18n }});
  app.config.globalProperties.$dialog = customDialog;
  // ^^^ Believe the error is here
});

我知道该组件是在 debug.vue 中安装的，我调用 this.show() 正确显示 q-dialog。

devug.vue

<template>
  <q-dialog v-model="alert">
    <q-card>
      <q-card-section>
        <div class="text-h6">Alert test</div>
      </q-card-section>

      <q-card-section class="q-pt-none">
        Lorem ipsum dolor sit amet
      </q-card-section>

      <q-card-actions align="right">
        <q-btn flat label="OK" color="primary" v-close-popup />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script>
export default {
  data () {
    return {
      alert: false,
    }
  },
  methods: {
    show (params) {
      console.log('Show method called',params);
       this.alert = true;
    },
  },
  mounted() {
    this.show('Parameters');
  }
};
</script>

但是在我的任何主项目 vue 文件中调用 this.$dialog.show('A sample parameter') 都会导致错误。我如何从 vNode const 返回到我可以在任何项目 vue 文件中调用的实际组件？

Answer 1

我想你想要的是一个自定义插件： https://v3.vuejs.org/guide/plugins.html#writing-a-plugin

如何在 Quasar 2 中调用动态创建/挂载的全局组件（Vue 3 - 选项 API）

How to call a dynamically created/ mounted global component in Quasar2 (Vue3 - Options API)

vue.js

global

mount

boot

quasar-framework