组件的参数校验:父组件通过属性传递给子组件数据,子组件有权对这些数据进行约束,这就是参数校验。
如下,简单的参数校验。
<div id="root">
<child content="hello world"></child>
<!-- 下面会报错,因为content传递的是一个数组,参数校验不通过 -->
<child :content="123"></child>
</div>
<script>
// 全局子组件
Vue.component("child",{
props: {
// 是数字的话,将String 变为Number即可
content: String,
// 数字和字符串都可以
vvv: [String, Number]
},
template: "<div>{{content}}</div>"
})
var vm = new Vue({
el: "#root"
})
</script>
更加复杂的参数校验条件,如下。
<div id="root">
<child content="hello world" :content2="'1wetwg2'"></child>
<!-- 下面会报错,因为content传递的是一个数组,参数校验不通过 -->
<child :content1="123" :content2="'1289gd'"></child>
</div>
<script>
// 全局子组件
Vue.component("child",{
props: {
// 是数字的话,将String 变为Number即可
content: String,
// 数字和字符串都可以
content1: [String, Number],
// required为 true 则必须有该参数
content2: {
type: String,
required: true,
default: "default value",
// 要求参数长度必须大于5
validator: function(value){
return (value.length > 5)
}
}
},
template: "<div>{{content2}}</div>"
})
var vm = new Vue({
el: "#root"
})
</script>
props 特性与 非props 特性
props 特性: 父组件使用了该特性往子组件传递参数,而子组件在props 中声明了该属性。
该属性不会显示在dom之中。子组件使用 this.参数名 或者{{参数名}} ,可以使用该属性
非 props 特性: 父组件使用了该特性往子组件传递参数,而子组件并没有在props 中声明了该属性。
该属性会显示在dom之中。子组件中无法使用。