vue——props的两种常用方法
vue——props的两种常用方法
1、实现父——>子的通信
举例如下：
父组件 parent.vue
<children :channel="object1"></children>
子组件 children.vue
export default{
name:"children",
props:["channel"],
data(){
return{
newChannel:null
}
}
methods:{
func1(){
this.newChannel = this.channel;
}
}
}
父组件object1的值放在channel变量，然后传入给子组件。这样可以达到父子之间的通信
2、校验变量
还可以通过组件传入的值判断是否符合要求，如果不符合发出警告，例如：
props:{
blackFlag:{
type:Boolean,
default:false
},
options:{
type:object
},
propsA:{
validator(value){
return value > 10
} ,
default:11
}
}
type 就是校验的要求，可以是如下类型：
- string
- number
- function
- boolean
- object
- array
- symbol
(校验变量的以上内容来自官方文档)
举个项目中用到的例子：
通过一个变量来控制一个组件的黑白皮肤显示，当变量存在时组件显示黑皮肤，不存在则默认白皮肤
props:{
blackFlag:{
type:Boolean,
default:false
}
},
methods:{
func1(){
if(this.blackFlag){
//黑皮肤 do
}else{
//白皮肤 do
}
}
}
<Loading blackFlag></Loading>
