相关疑难解决方法(0)

我有一个用于常见场景的 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 的完整示例。