如何在 Vue 3 中以编程方式创建组件实例？

Question

我有一个用于常见场景的 Vue 2 模式：以编程方式创建一个实例以在模板外部的动态内容上打开模态/对话框/灯箱。

在 Vue 2 中，我发现了这种模式：

// DialogService.js

export default {
  alert(text) {
    const DialogClass = Vue.extend(DialogComponentDef);
    let dialog = new DialogClass({ propsData: { text } });

    dialog.$on('close', () => {
      dialog.$destroy();
      dialog.$el.remove();
      dialog = null;
    });

    // mount the dynamic dialog component in the page
    const mountEl = document.createElement('div');
    document.body.appendChild(mountEl);
    dialog.$mount(mountEl);
  },
};

我怎样才能在 Vue 3 中实现这一点，知道Vue.extends, $on&$destroy不再存在？您可以单击此处查看 DialogService.js 的完整示例。

Answer 1

以下是 Vue 3 中的处理方法createApp，但上下文（存储、插件、指令...）不会被保留。

// DialogService.js
import { createApp } from 'vue';

export default {
  alert(text) {
    const mountEl = document.createElement('div');
    document.body.appendChild(mountEl);

    const dialog = createApp({ extends: DialogComponentDef }, {
      // props
      text,
      // events are passed as props here with on[EventName]
      onClose() {
        mountEl.parentNode.removeChild(mountEl);
        dialog.unmount();
        dialog = null;
      },
    });

    dialog.mount(mountEl);
  },
};

h为了保持上下文，可以使用renderVue 方法看到更复杂的东西：https: //github.com/vuejs/vue-next/issues/2097#issuecomment-709860132