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变量，然后传入给子组件。这样可以达到父子之间的通信

还可以通过组件传入的值判断是否符合要求，如果不符合发出警告，例如：

props:{     blackFlag:{          type:Boolean,          default:false     },     options:{          type:object     },     propsA:{         validator(value){               return value > 10          } ,          default:11     }}

type 就是校验的要求，可以是如下类型：

1. string
2. number
3. function
4. boolean
5. object
6. array
7. symbol

(校验变量的以上内容来自官方文档)

举个项目中用到的例子：

通过一个变量来控制一个组件的黑白皮肤显示，当变量存在时组件显示黑皮肤，不存在则默认白皮肤

props:{
blackFlag:{
type:Boolean,
default:false
}
},
methods:{
func1(){
if(this.blackFlag){
//黑皮肤 do
}else{
//白皮肤 do
}
}
}

<Loading blackFlag></Loading>