Vuejs 3 如何以编程方式获取组件实例属性

Question

我有一个用 vue 2 编写的函数，我需要修改 vue 3。有一个名为 Modal 的组件，它是一个带有很多道具和选项的确认框。在代码库中，它在许多地方以编程方式调用 showPrompt 函数，它基本上创建一个新的组件实例，并使用 $on 方法添加发射监听器，并将 isVisible 数据更改为 true 以显示组件。 Vue.component 随 app.component 更改，并且它不返回注册的组件实例。我无法使用 $on、$destroy 方法等。我如何修改版本 3 的此功能。

import Modal from '@/layouts/Modal.vue'

export function showPrompt (props: object) {
  const Klass = Vue.component('promptModal', Modal)
  const propsData = {
    positiveButtonColor: 'error',
    showPositiveButton: true,
    contentSlotPaddingClass: 'pa-0',
    ...props
  }
  // FIXME: Type Issue
  // @ts-ignore
  if (get(propsData, 'positiveButtonText', '') === 'Yes') {
    set(propsData, 'positiveButtonColor', 'primary')
  }
  const instance = new Klass({
    vuetify,
    i18n,
    propsData: propsData
  })
  each(get(propsData, 'listeners'), (listener, key) => {
    // FIXME: Type Issue
    // @ts-ignore
    instance.$on(key, listener)
  })
  instance.$on('dialogObserverCallback', (value: boolean) => {
    if (!value) {
      setTimeout(() => {
        instance.$destroy()
      }, 1000)
    }
  })
  instance.$mount()
  set(instance, 'isVisible', true)
  return instance
}

我尝试使用defineExpose来访问组件数据，但无法取得进展

Answer 1

我认为这是 VueJS 内部的问题 - 而且也不是设计多个组件之类的东西的好方法。

---

您想要替换的内容需要对 VueJS 3 的工作原理有足够的了解。以下是如何工作的示例，但请注意，组件上下文（存储、插件、指令...）将会丢失：

import { defineComponent, createApp } from 'vue';
import Modal from '@/layouts/Modal.vue';

const modalView = defineComponent({
    extends: Modal
})

const div = document.createElement('div');
this.$refs.container.appendChild(div);
createApp(modalView).mount(div)