在Vue 3中，Vue组件属性的正确类型是什么？

Question

我们的一些组件使用其他组件作为属性。

一个简单的例子：<my-interface-component :popup="myPopup"/>

其中，myPopup将是一个具有open方法的组件，该方法允许使用消息打开这个外部弹出组件。

在Vue 2中，我们常常像这样设置这个属性：

  /**
   * @prop {Vue} popup A root popup component to use
   */
  popup: {
    type: Vue
  },

我们可以给出组件定义或现有组件引用。

但是在Vue 3中不再存在这样的Vue对象。我应该只使用Object还是有更明确的方法？

我们使用Vue 3的CDN版本和Vanilla JS。

非常感谢

Answer 1

组件的正确类型是ComponentOptions|ComponentOptions['setup']，它被简化为可读性，如前面提到的这里。

import {ComponentOptions, PropType } from 'vue'

props:{
  popup: {
    type: Object as PropType<ComponentOptions|ComponentOptions['setup']>
  },

}

但是，建议将组件/元素作为插槽传递，而不是作为道具：

儿童部分：

<template>
  <div>
    <slot name="popup" />
  </div>
</template>

在父母中：

<template>
 <div>
    <template #popup>
       <MyPopup />
    </template>
 </div>
</template>