一、说明
父组件通过属性绑定向子组件传值，绑定的属性名称需要在子组件的props属性身上定义一下，可以简单定义为数组。
数组方式对于其要接受的参数有什么要求并不清楚，因此传入的参数可能会在开发子组件的人的意料之外，程序就会发生错误，就像我们在函数调用之前先检查一下函数一样。props也可以进行一个预先检查。
props 属性指向一个对象来规定各个绑定属性值的校验规则。
二、检查规则
1、type
声明参数允许的数据类型（检查规则只有一个type时可以简写；当参数可以是多种类型的其中一个的时候，使用数组来表示），类型可以是：
- String
- Number
- Boolean
- Function
- Object
- Array
- Symbol
- (
null和undefined会通过任何类型验证)
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
</style>
</head>
<body>
<div id='app'>
<!-- 通过属性绑定方式把父组件数据传递给子组件内部 -->
<com1 :parent-msg="msg"></com1>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
msg: 'msg-父组件数据',
},
components: {
com1: {
template: '<h1>这是子组件——{{parentMsg}}</h1>',
props: {
"parent-msg": {
type: String
}
// 简写
// "parent-msg":String
//多种类型用数组
// "parent-msg": [String, Number]
}
},
}
});
</script>
</body>
</html>
2、required
选项来声明这个参数是否必须传入，required: true表示必传。
"parent-msg": {
type: String,
required:true
}
3、default
指定当父组件未传入参数时props变量的默认值。当type的类型为 Array 或者 Object 的时候default必须是一个工厂函数返回数据（对象和数组是引用类型）。
"parent-msg": {
type: Object,
// 当为对象类型设置默认值时必须使用函数返回
default: function () {
return {
message: 'Hello, world'
}
}
}
4、validator
当校验规则很复杂，默认提供的校验规则无法满足的时候可以使用自定义函数来校验，第一个参数即为传过来的值，用return作为函数返回。
"parent-msg": {
validator: function (value) {
return value >= 0 && value <= 100;
}
}
网友评论