Vue2---全局事件总线

全局事件总线

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

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接收参数后，调用该函数，通过函数参数的形式，将数据带到父组件中。

3.利用全局事件总线传数据

了解了上面两种写法后，我们知道，利用收数据组件上定义函数，发数据组件上触发该函数，便可以巧妙的通过函数参数的形式传递数据，而全局事件总线也是利用了这一点，不过没有借助props，而是借助的是自定义事件实现的。

实现思路：通过一个中间件（可以使任意组件访问），收数据方，在中间件上定义一个事件，发数据方，在中间件上触发该事件，因为事件回调函数在收数据方，回调参数由发数据方提供。进而完成数据传递

因为：VueComponent.propotype.__proto__ === .Vue.prototype，显而易见，可以在Vue.prototype上绑定一个Vuecomponent或Vue实例对象作为中间件。

main.js:(入口文件)

const Vue from 'vue',
new Vue{
    render:h => h(App),
    beforeCreate(){
        Vue.prototype.$bus = this; // 安装全局事件总线,此处使是把Vue实例本身挂载到了$bus中间件上
    }
}

收数据方：

export default {
    methods:{
        getName(name){
            console.log('我收到了M78星云传过来的数据'，name)	// 牛伟豪
        }
    },
    mounted(){
        // 在$bus上绑定自定义事件
        this.$bus.$on('getName',this.getName);	// 第一个参数指定自定义事件名称，第二个是事件回调
    }
}

发数据方：

export default {
    data(){
        return{
            name:'牛伟豪',
        }
    },
    methods:{
        // 假设此函数是某按钮的click执行函数
        sendName(){
            // 触发$bus上的自定义事件
            this.$bus.$emit('getName',this.name);	//第一个参数指定自定义事件名称，第二个是回调参数
        }
    }
}

逻辑大致如此，说实话，自己总结写出这些笔记后，突然感觉逻辑变得清晰易懂了，果然自己独立思考的过程才是真正能进步的。初学者多复现所学知识，才是正道啊。

如有哪里写的不好甚至不对，希望大家指正。