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>
版权声明：本文为liaoanran原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。