javascript - vuejs 的组件验证有什么用，意义在哪

Question

Vue.component('example', {
props: {

// 基础类型检测 （`null` 意思是任何类型都可以）
propA: Number,
// 多种类型
propB: [String, Number],
// 必传且是字符串
propC: {
  type: String,
  required: true
},
// 数字，有默认值
propD: {
  type: Number,
  default: 100
},
// 数组／对象的默认值应当由一个工厂函数返回
propE: {
  type: Object,
  default: function () {
    return { message: 'hello' }
  }
},
// 自定义验证函数
propF: {
  validator: function (value) {
    return value > 10
  }
}

}
})

Answer 1

首先要明白vue组件的设计思想，那就是低耦合度。
换句话讲，就是组件代码拷贝到任何地方都能契合进去。
那么，如果说，一个组件规定只能传入String的类型，那么当一个页面需要用这个组件的时候，这个页面还需要对传入的数据进行处理后再传值，这样就变相地提高了耦合度，万一你要更换组件的时候，还要把相关的处理代码一并修改。这样就增加了父级与组件之间的关系。
最理想的情况就是，父级需要这个组件，直接把组件的标签插入模板中，不需要更多操作。不需要的时候，直接删掉这个组件的标签，也不需要更多操作。
这样，这个props传值验证就十分有用了，只要检测到你的值不是我想要的，我就先处理成我组件能够识别的值，然后再渲染