vue组件开发的props验证
首先，我们要了解的就是在Vue中父子组件通信是通过props进行数据的传输的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue Study</title>
</head>
<body>
<div id="app">
// 创建子组件，通过 :foo-message 向子组件传参
<foo-component :foo-message="fooMessage"></foo-component>
</div>
<script type="text/javascript" src="lib/vue.js"></script>
<script type="text/javascript">
var fooComponent = {
props: ['fooMessage'],//通过props实现简单的传参功能
template: ' {
{ fooMessage }} '//定义模板
};
var vm = new Vue({
//new一个Vue的实例
components: {
//自定义组件
'foo-component': fooComponent
},
el: '#app',//提供了一个在页面已存在的DOM元素作为Vue实例的过在目标
data: {
//数据的存放
fooMessage: 123
}
});
</script>
</body>
</html>
上述代码只是在
html中一个简单举例，相信同学们都能看懂，
props的产生
在我们进行数据的传参时，可能对于参数的类型并不是很清楚，当传入的参数在规范之外，就很容易产生错误，这个时候props验证的重要性就体现了。
通过props，我们在数据的传参时，可以对一些数据进行管理，并且进行验证，当数据类型不符合标准时，就会将其抛出，不去调用这个参数。从而简化了代码以及不必要的操作。等数据完成验证，符合标准，才能对这个数据进行一些调用、以及后续的操作。
并且当参数不正确是会提示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8UP813om-1618828220269)(D:\全栈学习\学习总结笔记\img\博客发文\props报错.png)]
type指定类型
var fooComponent = {
props: {
fooMessage: [Number, String]
},
template: ' {
{ fooMessage }} '
};
String
Number
Boolean
Function
Object
Array
Symbol
通过required声明参数是否必须传入
var fooComponent = {
props: {
fooMessage: {
type: Number,
required: true
}
},
通过default来指定父组件为传入参数是props变量的默认值
var fooComponent = {
props: {
fooMessage: {
type: Number,
default: 128
}
},
当父组件未传入参数时子组件的值是128，当父组件传入参数时是其指定的参数，比如这里可以是256。
当type的类型为Array或者Object的时候default必须是一个函数：
var fooComponent = {
props: {
fooMessage: {
type: Array,
default: function(){
return ['foo', 'bar'];
}
}
},
validator自定义验证规则
当校验规则很复杂，默认提供的校验规则无法满足的时候可以使用自定义函数来校验
var fooComponent = {
props: {
fooMessage: {
validator: function(value){
return value>=0 && value<=128;
}
}
},
注意：
单项数据流是不允许修改的。
在组件中修改prop传递过来的数据vue会发出警告，通常我们是通过两种方式进行修改props中的值
- 本地data中定义属性，进props作为初始值
props: ['msg'],
data() {
return {
msg_data: this.msg
}
}
- 使用
computed进行处理
props:['msg']
computed:{
msg_computed(){
return this.msg + " Computed"
}
}
总结
prop数据单项传递，父影响子，子影响父- 不能在组建中直接修改
prop传递过来的值，Vue会发出警告- prop在进行验证，会在实例创建之前进行验证，所以实例的属性，比如
data、computed等或者validator函数中是不可用的- 非 prop 特性，组件可以接受任意的特性，而这些特性会被添加到这个组件的根元素上