Vue – props参数使用

简介

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

定义方法

export default {
  props:['foo','foo2']
}

只读

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

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

default 默认值

props 参数如果不传值，将为 undefined ,但可以通过设置默认值，当不传值时，props 成员将为默认值，但需要改为 对象 形式写法

export default {
  props:{
    foo:{
      default:undefined
    }
  },
}

type 值约束

props 属性接收时很可能出现类型错误，而 type 值约束则可以规定 props 值传过来时的值类型是否为预期的类型，否则会报错。

export default {
  props:{
    foo:{
      default: 0,
      type: Number
    }
  },
}

type 限制数据类型

可以直接为组件的prop 属性指定基础的校验类型，从而防止组件的使用者为其绑定错误类型的数据

required 必填项校验

如果需要规定 props 值必须传递，可以设置 required 为 true 强制要求传递参数。如果没有传递则报错

注意：required 只约束是否传递参数值，即使已定义了 default 值，依然会报错

自定义验证函数［3.0］

在封装组件时，可以为prop 属性指定自定义的验证函数，从而对prop 属性的值进行更加精确的控制