Vue 3中接收组件类型属性的正确类型定义方式

我们的部分组件会将其他组件作为属性传入，举个简单示例：

<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版本搭配原生JS。

解决方案 #

在Vue3的CDN原生JS环境下，不用局限于Object，有几种更明确的方式来定义这个Prop：

1. 针对组件定义的类型校验 #

如果你的popup接收的是组件定义（比如通过Vue.defineComponent创建的组件），可以直接用Vue.defineComponent作为类型：

popup: {
  type: Vue.defineComponent,
  required: true,
  validator: (value) => {
    // 额外校验必须包含open方法
    return typeof value.open === 'function'
  }
}

2. 针对组件实例的类型校验 #

如果传入的是已挂载的组件实例，可以结合Vue实例的内部特征和自定义验证器来约束：

popup: {
  type: Object,
  required: true,
  validator: (value) => {
    // 校验是Vue实例且存在open方法
    return value._isVue === true && typeof value.open === 'function'
  }
}

3. 同时兼容组件定义和实例 #

如果需要同时支持两种传入方式，用联合类型加验证器即可：

popup: {
  type: [Object, Vue.defineComponent],
  required: true,
  validator: (value) => {
    const isComponentDef = typeof value === 'object' && (value.setup || value.render);
    const isComponentInstance = value._isVue === true;
    // 确保要么是组件定义要么是实例，且都有open方法
    return (isComponentDef || isComponentInstance) && typeof value.open === 'function';
  }
}

为什么不直接用Object？ #

虽然Object能通过基础校验，但自定义验证器可以明确约束传入值的结构，在开发阶段就能及时拦截不符合要求的参数，比单纯的Object类型更严谨。

内容的提问来源于stack exchange，提问作者Nabab