[VUE中的全局事件总线]

什么是全局事件总线

全局事件总线是一种组件间的通信方式,适用于任意组件间的通信

全局事件总线的作用

安装一个全局事件总线(GlobalEventBus)

new Vue({
    render:h => h(App),
    // 安装全局事件总线 GlobalEventBus
    beforeCreate(){
        // $bus 就是 当前应用的vm
        Vue.prototype.$bus = this
        console.log(this)
    }
}).$mount('#app')

应为全局事件总线用于任意组件间通信,所以在声明vue时就应当安装全局事件总线,this是声明Vue内的,所以该this指向的是vm本身而不是vc或者window

发送数据以及接受数据

我们有组件Student和组件School,两个组件是同等级别的,我们要做的是点击Student的按钮,把学生名给School组件,School组件收到数据并在控制台中输出姓名即可,因为是两个同等级组件的通信,使用全局事件总线是一个比较好的办法
组件Student:

<template>
    <div>
        <h2>学生姓名:{{name}}h2>
        <h2>学生性别:{{sex}}h2>
        <button @click="sendStudentName">把学生名给School组件button>
    div>
template>
export default {
    name:'Student',
    data() {
        return {
            name:'张三',
            sex:'男'
        }
    },
    methods:{
        sendStudentName(){
            // 出发$bus全局总线名字叫hello的事件 并传参vc的name
            this.$bus.$emit('hello',this.name)
        }
    },
    mounted() {
        
    },
}

组件School:

<template>
    <div>
        <h2>学校名称:{{name}}h2>
        <h2>学校地址:{{address}}h2>
    div>
template>
export default {
    name:'School',
    data() {
        return {
            name:'南京大学',
            address:'南京'
        }
    },
    mounted() {
        // console.log('School',this) 
        // 向全局总线$bus绑定了一个单机事件($on)名字为hello,接受了一个数据data
        this.$bus.$on('hello',(data)=>{
            console.log('我是School组件,收到了数据',data)
        })
    },
    // 销毁之前
    beforeDestroy(){
        // 销毁之前销毁 hello事件
        this.$bus.$off('hello')
    }
}

从以上代码可以看出哪一个组件接受数据就在那一个组件绑定($on)自定义事件,事件回调在该组件自身
发送数据的组件触发事件($emit)

全局事件总线总结:

1.绑定自定义事件以及回调在接受数据的组件内完成,切记在生命周期销毁之前(beforeDestroy())要销毁相应的事件

mounted() {
		//向全局总线$bus绑定了一个单机事件($on)名字为hello,接受了一个数据data
        this.$bus.$on('hello',(data)=>{
            console.log('我是School组件,收到了数据',data)
        })
    },
    // 销毁之前
    beforeDestroy(){
        // 销毁之前销毁 hello事件
        this.$bus.$off('hello')
    }

2.在发送数据的组件内出发事件,并传入相应的参数,参数一为:出发的事件名,别的参数为:值

	methods:{
        sendStudentName(){
            // 出发$bus全局总线名字叫hello的事件 并传参vc的name
            this.$bus.$emit('hello',this.name)
        }
    }

你可能感兴趣的:(vue.js,前端)