Vue.js props用法及代码示例

声明组件的 props。

类型

interface ComponentOptions {
  props?: ArrayPropsOptions | ObjectPropsOptions
}

type ArrayPropsOptions = string[]

type ObjectPropsOptions = { [key: string]: Prop }

type Prop<T = any> = PropOptions<T> | PropType<T> | null

interface PropOptions<T> {
  type?: PropType<T>
  required?: boolean
  default?: T | ((rawProps: object) => T)
  validator?: (value: unknown) => boolean
}

type PropType<T> = { new (): T } | { new (): T }[]

为了便于阅读，类型被简化了。

细节

在 Vue 中，所有组件的 props 都需要显式声明。组件 props 可以以两种形式声明：

使用字符串数组的简单形式
使用对象的完整形式，其中每个属性键是道具的名称，值是道具的类型(构造函数)或高级选项。

使用基于对象的语法，每个 prop 可以进一步定义以下选项：

type: 可以是以下本机构造函数之一：String,Number,Boolean,Array,Object,Date,Function,Symbol，任何自定义构造函数或它们的数组。在开发模式下，Vue 会检查 prop 的值是否与声明的类型匹配，如果不匹配则会抛出警告。看道具验证更多细节。
另请注意，Boolean 类型的道具会影响其在开发和生产中的值转换行为。有关详细信息，请参阅Boolean Casting。
default: 为 props 指定一个默认值，当它没有被父级传递或有undefined值。必须使用工厂函数返回对象或数组默认值。工厂函数还接收原始 props 对象作为参数。
required：定义是否需要道具。在非生产环境中，如果该值是真实的并且没有传递道具，则会抛出控制台警告。
validator: 以 prop 值作为唯一参数的自定义验证器函数。在开发模式下，如果此函数返回错误值(即验证失败)，将引发控制台警告。

示例

简单声明：

export default {
  props: ['size', 'myMessage']
}

带有验证的对象声明：

export default {
  props: {
    // type check
    height: Number,
    // type check plus other validations
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: (value) => {
        return value >= 0
      }
    }
  }
}

相关用法

注：本文由纯净天空筛选整理自vuejs.org大神的英文原创作品 props。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。