父子组件通信 属性验证
案列：价格的增加，拿到数据必须要做验证 防止数据是string型
使用props: 验证
1.props : [‘msg’] 没有进行验证，只是单纯的接受了一个父组件传递来的数据
2.props : {attr: attrType} 进行普通属性验证
3.props : {type:typeType,default:value} 这里的default是为了这个属性设置的初始值的
4.props : {validator(val) {return boolean}}可以进行一个条件的比较
返回一个boolean值
<body>
<div id="app">
<Father></Father>
</div>
<template id="father">
<div>
<p>这个是父组件</p>
<Son :m = "m" :n = "n"></Son>
</div>
</template>
<template id="son">
<div>
<p>这个是子组件</p>
<p> {{ m }}</p>
<p> {{ n+200 }} </p>
</div>
</template>
</body>
<script>
Vue.component('Father',{
template : "#father",
data(){
return {
m: 300,
n: 200
}
}
})
Vue.component("Son",{
template : "#son",
props: {
'm': Number,
'n': {
validator(val){
return val >150
}
}
}
})
new Vue({
}).$mount('#app')
</script>
5105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
