组件的props

1.组件的props

props是组件的自定义属性，在封装通用组件的时候，合理地使用props 可以极大的提高组件的复用性!

1.1 props是只读的

vue规定:组件中封装的自定义属性是只读的，程序员不能直接修改props的值。否则会直接报错。

要想修改props 的值，可以把props的值转存到data中，因为data 中的数据都是可读可写的!

1.2 props 的default 默认值

在声明自定义属性时，可以通过default来定义属性的默认值。示例代码如下:

1.3 props 的 type值类型

在声明自定义属性时，可以通过type来定义属性的值类型。示例代码如下:

export default {
  // props 是"自定义属性"，允许使用者通过自定义属性，为当前组件指定初始值
  // 自定义属性的名字，是封装者自定义的（只要名称合法即可）
  // props 中的数据，可以直接在模板结构中被使用
  // 注意：props 是只读的，不要直接修改 props 的值，否则终端会报错！
  // props: ['init'],
  props: {
    // 自定义属性A : { /* 配置选项 */ },
    // 自定义属性B : { /* 配置选项 */ },
    // 自定义属性C : { /* 配置选项 */ },
    init: {
      // 如果外界使用 Count 组件的时候，没有传递 init 属性，则默认值生效
      default: 0,
      // init 的值类型必须是 Number 数字
      type: Number
    }
  },

1.4 props的required必填项

export default {
  // props 是"自定义属性"，允许使用者通过自定义属性，为当前组件指定初始值
  // 自定义属性的名字，是封装者自定义的（只要名称合法即可）
  // props 中的数据，可以直接在模板结构中被使用
  // 注意：props 是只读的，不要直接修改 props 的值，否则终端会报错！
  // props: ['init'],
  props: {
    // 自定义属性A : { /* 配置选项 */ },
    // 自定义属性B : { /* 配置选项 */ },
    // 自定义属性C : { /* 配置选项 */ },
    init: {
      // 如果外界使用 Count 组件的时候，没有传递 init 属性，则默认值生效
      default: 0,
      // init 的值类型必须是 Number 数字
      type: Number,
      // 必填项校验
      required: true
    }
  },