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