props属性验证
程序员文章站
2022-05-13 20:59:31
...
props属性验证
- 常用形式：
props: {
key: keyType // key是从父组件获得的自定义属性， 值是我们期望得到的数据类型
}
- 业务：我现在想要 > 1000 我才要， 没有 > 1000 我就不要
- 解决： vue提供了一个 ：validator
props: {
key: {
validator( value ){
return value 的条件
}
}
}
- 不常用形式
props: {
propA: [],
propB: {
type: String,
require: true
},
propC: {
type:String,
default: 'yyb'
},
propD: {
type: String,
default: function(){
return 'yyb'
}
}
}
- 有时候有的项目总也会使用一个叫做 vue-validate validate这些第三方库
例子
<body>
<div id="app">
<Father></Father>
</div>
<template id="father">
<div>
<h3> father组件 </h3>
<hr>
<Son
:money = "money"
:goodnum = 'goodNum'
/>
</div>
</template>
<template id="son">
<div>
<h3> son组件 </h3>
<p> 给了我{{ money + 1 }} </p>
</div>
</template>
</body>
<script>
Vue.component('Father',{
template: '#father',
data () {
return {
money: 1000,
goodNum: 200
}
}
})
Vue.component('Son',{
template: '#son',
props: {
'money': Number,
'goodnum': {
validator( value ){
return value > 100
}
}
}
})
new Vue({
el: '#app'
})
</script>
上一篇： python async 使用过程中可变参数，主线程，子线程问题
下一篇： 异步获取risfond