正文
Vue组件传值prop验证方式
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
在Vue组件开发过程中，父组件要经常给子组件传递数据，在传递数据的过程中，子组件可以使用prop来接收父组件传递的值，同时呢，我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助，这样有利于多人协作开发提高效率。
Vue.component('demo', {
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 ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
ps：另外在父组件和子组件通信过程中还有一些注意事项。
①注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。
②注意那些 prop 会在一个组件实例创建之前进行验证，所以实例的属性 (如
data
、
computed
等) 在
default
或
validator
函数中是不可用的。
