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>