Vue3 Props 对象属性如何定义类型

在Vue3中，我们可以使用props选项来定义组件的属性，以接收父组件传递的数据。在定义属性类型时，Vue3引入了一种新的语法来指定属性的类型。

1. Vue3中的`props`选项

在Vue3中，使用props选项来定义组件的属性。props选项是一个对象，可以包含组件的所有属性，并为每一个属性指定类型和默认值。

const MyComponent = {
  props: {
    // 属性名: 属性类型
    message: String,
    count: Number,
    isActive: Boolean,
    items: Array,
    user: Object
  },
  template: `
    <div>{{ message }}</div>
  `
}

在上面的示例中，message属性的类型是字符串(String)，count属性的类型是数字(Number)，isActive属性的类型是布尔值(Boolean)，items属性的类型是数组(Array)，user属性的类型是对象(Object)。

2. 使用`type`选项指定属性类型

在Vue3中，可以使用type选项来指定属性的类型，而不是直接使用简单的数据类型名。

const MyComponent = {
  props: {
    // 属性名: { 类型: 构造函数 }
    message: { type: String },
    count: { type: Number },
    isActive: { type: Boolean },
    items: { type: Array },
    user: { type: Object }
  },
  template: `
    <div>{{ message }}</div>
  `
}

这种语法使得我们可以更加灵活地指定属性的类型，可以使用构造函数来指定自定义类型，如Object或Array。

3. 使用`required`选项指定属性是否必需

在Vue3中，可以使用required选项来指定属性是否是必需的。默认情况下，所有属性都是可选的。如果希望某个属性是必需的，可以将required选项设置为true。

const MyComponent = {
  props: {
    // 属性名: { 类型: 构造函数, 是否必需: true }
    message: { type: String, required: true },
    count: { type: Number, required: true },
    isActive: { type: Boolean, required: true },
    items: { type: Array, required: true },
    user: { type: Object, required: true }
  },
  template: `
    <div>{{ message }}</div>
  `
}

在上面的示例中，message、count、isActive、items和user属性都被指定为必需的，如果父组件没有传递这些属性，会发出警告。

4. 使用`default`选项指定属性的默认值

在Vue3中，可以使用default选项来指定属性的默认值。当父组件没有为属性传递值时，就会使用指定的默认值。

const MyComponent = {
  props: {
    // 属性名: { 类型: 构造函数, 默认值: 默认值 }
    message: { type: String, default: 'Hello Vue' },
    count: { type: Number, default: 0 },
    isActive: { type: Boolean, default: false },
    items: { type: Array, default: () => [] },
    user: { type: Object, default: () => ({}) }
  },
  template: `
    <div>{{ message }}</div>
  `
}

在上面的示例中，如果父组件没有为message属性传递值，则默认显示'Hello Vue'；如果父组件没有为count属性传递值，则默认为0；如果父组件没有为isActive属性传递值，则默认为false；如果父组件没有为items属性传递值，则默认为一个空数组；如果父组件没有为user属性传递值，则默认为一个空对象。

5. 使用类型约束修饰符

除了使用type选项指定属性的类型外，Vue3还引入了一种新的语法来进一步约束属性的类型，称为类型约束修饰符。

在Vue3中，可以使用以下类型约束修饰符：

String：字符串类型
Number：数字类型
Boolean：布尔类型
Array：数组类型
Object：对象类型
Function：函数类型
Symbol：符号类型

const MyComponent = {
  props: {
    message: String!,       // 字符串类型，且必需
    count: Number?,         // 数字类型，可选
    isActive: Boolean[],    // 布尔类型的数组
    items: Array<String>,   // 字符串类型的数组
    user: { type: Object }  // 对象类型
  },
  template: `
    <div>{{ message }}</div>
  `
}

在上面的示例中，message属性必须是字符串类型，count属性可选且必须是数字类型，isActive属性必须是布尔类型的数组，items属性必须是字符串类型的数组，user属性必须是对象类型。