Vue3 Props 定义指南：类型、默认值、验证与响应式

Vue3 中的 props 通过以下方式定义：

const MyComponent = {
  props: {
    // 基本类型检测 (`null` 意思是任何类型都可以)
    propA: String,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字，有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 对象/数组的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: () => ({ message: 'hello' })
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  },
  // ...
}

每个 props 属性都是一个对象，可以包含以下配置项：

• type：指定 props 的类型，可以是 String、Number、Boolean、Array、Object、Date、Function、Symbol 等。也可以是自定义的构造函数。
• default：指定 props 的默认值。
• required：指定 props 是否必须。
• validator：指定一个自定义验证函数，用于验证 props 的值是否合法。

注意：在 Vue3 中，prop 默认是不会在子组件中自动响应式更新的。如果需要自动响应式更新，可以使用 v-model 或 emit 事件来实现。