Vue2组件接收含type字段的对象Prop时警告如何解决？

你之前的两种写法都踩了Vue2 Prop配置的坑：

• 第一种写法里，你把自定义的title属性直接放进Prop配置对象，但Vue只认type、validator这些官方指定的配置字段，这里你把type设为String，导致Vue期望接收字符串，可你传的是对象，自然报错。
• 第二种写法里，你把type设成了普通对象，但Vue要求type必须是构造函数（比如Object、String这种），所以触发了类型无效的警告。

下面是两种正确的实现方式：

方法一：纯JS场景用自定义验证函数 #

先指定Prop的基础类型为Object，再通过validator字段验证对象的结构：

export default {
  props: {
    myProp: {
      type: Object,
      validator: (value) => {
        // 校验对象是否包含title和type两个字符串属性
        return typeof value === 'object' && value !== null
          && typeof value.title === 'string'
          && typeof value.type === 'string';
      }
    }
  }
}

这种方式既符合Vue的Prop规则，又能确保传入的对象结构符合预期，不会触发警告。

方法二：TS场景用类型声明 #

如果项目用TypeScript，可以结合PropType来做类型约束：

import Vue from 'vue';
import { PropType } from 'vue';

// 定义接口描述对象结构
interface MyProp {
  title: string;
  type: string;
}

export default Vue.extend({
  props: {
    myProp: {
      type: Object as PropType<MyProp>,
      // 按需设置是否必填
      required: false
    }
  }
});

这种方式能在编译阶段就检查类型，运行时也不会触发Vue的警告。

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