VUE2中的组件间通信（全局事件总线）

在Vue中，全局事件总线使任意组件可以相互通信，下面先介绍两种父子相邻组件的信息传递方式。

一、props数据传输

1.父组件给子组件传数据

父组件：(假设子组件name为Child)

<Child name='芭芭拉' age='18'>
	
</Child>

子组件：

export default {
	name:'Child',
	props:['name','age']
}

父组件通过在组件标签上定义key-value属性值，将信息传递给子组件，子组件通过props接收，key作为props参数，此时，name,age两个属性便被挂载到了子组件VueComponent上。

2.子组件给父组件传数据

父组件：

<Child :getName=getChildName>
	
</Child>

export default {
    methods:{
        getChildName(name){
            console.log('我收到了子组件传过来的数据'，name)	// 芭芭拉        }
    }
}

子组件：

export default {
    data(){
        return{
            name:'芭芭拉'，
        }
    }
    props:['getName'],	// 接收父组件传来的 getChildName 函数
    methods:{
        // 假设这是按钮的点击事件
        passName(){
            this.getName(this.name) // 携带子组件数据在父组件中执行函数
        }
    }
}

实际上，子组件向父组件传递数据，借助了父组件给子组件传数据的思路，不过此时父组件传递的不是直接的数据，而是一个在父组件的函数，子组件通过props接收参数后，调用该函数，通过函数参数的形式，将数据带到父组件中。

其中props数据传输分为一下几种：

1.简单接收

2.规定数据类型接收

3.高级类型

小总结：

二、全局事件总线

1.原理图：

tips：小粉就是中间负责传输数据的

2.vue与vuecomponent的关系

3.将x（全局都能看见的组件）加在vue的原型对象上，因为只有一个vue原型对象（prototype）​​​​​​​

在哪引入的vue就在哪操作vue的原型对象（main.js）

步骤：$bus:总线

放置函数：

触发回调触发

总结