简述prop 如何指定其类型要求？

八股文_Vue面试题 0 56

参考回答：

在 Vue 中，props 用于父组件向子组件传递数据。你可以通过在组件的 props 选项中指定每个 prop 的类型，以确保传递给组件的数据符合预期的类型。Vue 提供了多种方式来指定 prop 的类型，支持基本类型（如 String, Number, Boolean 等）以及自定义验证函数。

Vue.component('my-component', {
  props: {
    name: {
      type: String,
      required: true
    },
    age: {
      type: Number,
      default: 18
    }
  }
});

在上述代码中：
– name 的类型要求是 String，并且是必填项。
– age 的类型要求是 Number，并且有默认值 18。

详细讲解与拓展：

1. 基本类型检查：

你可以为 props 指定一个类型，这样 Vue 会检查传递给该 prop 的数据类型是否符合要求。支持的类型包括：
– String
– Number
– Boolean
– Array
– Object
– Function
– Symbol

例子：

Vue.component('my-component', {
  props: {
    title: {
      type: String
    },
    count: {
      type: Number
    }
  }
});

如果父组件传递的 title 不是字符串，或者 count 不是数字，Vue 会在开发环境下警告。

2. required：

你可以通过 required 属性标记一个 prop 为必填项。required: true 表示该 prop 必须由父组件传递，若未传递 Vue 会在控制台给出警告。

例子：

Vue.component('my-component', {
  props: {
    title: {
      type: String,
      required: true
    }
  }
});

如果父组件没有提供 title，Vue 会在控制台输出警告。

3. 默认值：

你可以通过 default 属性指定一个 prop 的默认值。如果父组件没有传递该 prop，Vue 会使用默认值。

例子：

Vue.component('my-component', {
  props: {
    name: {
      type: String,
      default: 'Guest'
    }
  }
});

如果父组件没有传递 name，则默认值 Guest 会被使用。

4. 自定义验证：

除了基本类型检查，Vue 还允许你使用自定义的验证函数来进一步验证 prop 的值。验证函数会接收 prop 的值，并返回 true 或 false，如果返回 false，Vue 会在控制台输出警告。

例子：

Vue.component('my-component', {
  props: {
    age: {
      type: Number,
      validator(value) {
        if (value < 0 || value > 120) {
          console.warn('Age must be between 0 and 120.');
          return false;
        }
        return true;
      }
    }
  }
});

在这个例子中，age 的值必须在 0 到 120 之间。如果传入的值不符合条件，Vue 会输出警告。

5. 类型检查和多类型支持：

你可以指定多个有效的类型，Vue 会检查 prop 的值是否是这些类型中的任何一种。如果 type 是一个数组，它会接受数组中的任意一个类型。

例子：

Vue.component('my-component', {
  props: {
    value: {
      type: [String, Number],
      required: true
    }
  }
});

在这个例子中，value 可以是字符串或数字。如果传入的是其他类型，Vue 会输出警告。

总结：

Vue 允许通过 type 属性指定 prop 的类型，支持基本类型（如 String, Number, Array 等）。
required 用于指定 prop 是否必填。
default 用于为 prop 提供默认值。
自定义的验证函数可以用来对 prop 值进行更复杂的验证。
可以指定多个类型，Vue 会检查 prop 的值是否是其中之一。

这些功能帮助确保组件的健壮性和数据的正确性，提高了代码的可维护性和开发效率。