vue中组件传值的几种方式

一、父组件给子组件传值方式（步骤）
1.VC1(子组件)定义props[a,b,c] 注意：props中的每个值都可以加各种修饰，如数据类型，是否可为空，默认值...
2.VC2(父组件)引用子组件
<VC1 a="1",b="2",c="3"></VC1>

二、子组件给父组件传值方式
1.回调方法（:xxx="methodA"）
a.父组件（数据接收方）定义此方法methodA
b.子组件（数据发送方）定义props:xxx【xxx属性为方法】 ***传过来得属性必须在props中定义，即只有在props中定义的属性才能被父组件传值
c.子组件（数据发送方）调用xxx方法
2.回调事件 <VC @xxx="methodB"></VC> this.@refs.VC.$on('xxx',methodB)
a.父组件（数据接收方）定义方法methodB
b.通过this.@refs.VC.$on('xxx',methodB) 绑定methodB
c.子组件（数据发送方）通过某事件去触发xxx事件 ----》this.$emit('atguigu',this.name,666,888,900)
d.父组件解绑该事件
3.回调事件<VC ref="curVC" @xxx="methodC"></VC>
a.父组件（数据接收方）定义方法methodC
b.子组件（数据发送方）通过某事件去触发xxx事件 ----》this.$emit('atguigu',this.name,666,888,900)
c.父组件解绑该事件

三、事件总线(步骤)
1.在vue对象中注册自己为$bus Vue.prototype.$bus=this
2.在VC(数据接收方)中定义方法methodA
3.this.$bus.$on('xxx',methodA) xxx：表示事件
4.VC2（数据发送方）去触发xxx事件，this.$bus.$emit('xxx',a,b,c)
5.解绑该事件

四、消息订阅与发布
1.VC1(订阅者)导入pubsub组件，在mount函数中订阅消息
this.pubId = pubsub.subscribe('xxx',(msgName,data)=>{
console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
})

2.VC2(发布者)导入pubsub组件，通过某事件去发布
pubsub.publish('xxx',666)

3.VC1(订阅者)在beforeDestory中取消订阅该消息
pubsub.ubsubscribe(this.pubId)