Vue中全局事件总线$bus的使用备忘

末蓝、 2024-03-30 14:44 57阅读 0赞

#### 文章目录 ####

*  Vue中全局事件总线$bus\_GlobalEventBus
 *   *  说明：
     *  1. 安装全局事件总线
     *  2. 使用事件总线
     *  3. 实例 -- 实现两个组件间互相通信
     *   *  3-1 main.js中安装全局事件总线
         *  3-2 HelloWorld.vue组件
         *  3-3 Student.vue组件

## Vue中全局事件总线$bus\_GlobalEventBus ##

### 说明： ###

*  它是一种组件间通信的方式,适用于任意组件间通信

### 1. 安装全局事件总线 ###

new Vue({
        
        beforeCreate(){
        
            Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm、vc
        }
    })

### 2. 使用事件总线 ###

// 1.接收数据: 
    //		A组件想接收数据, 则在A组件中给$bus绑定自定义事件,
    //		事件的回调留在A组件自身
            methods(){
        
            	// 接受数据的组件，执行回调的方法名
                demo(data){
        
                    .....
                }
            },
            mounted() {
        
            	// 事件绑定：自己定义的事件名 ‘XXX’
                this.$bus.$on('xxx',this.demo)
            },
            // 最好在beforeDestroy钩子中, $off去解绑事件.
            beforeDestroy(){
        
            	// 事件解绑
    			this.$bus.$off('xxx')
    			// 多个事件解绑
    			// this.$bus.$off(['xxx','yyyy',...])
    			// 解绑所有自定义事件，慎用呀！！！ 全局事件总线事件全给干掉了
    			// this.$bus.$off()
    		}
    
    // 2.提供数据:this.$bus.$emit('xxxx',数据)

### 3. 实例 – 实现两个组件间互相通信 ###

#### 3-1 main.js中安装全局事件总线 ####

// main.js中，new Vue的beforeCreate钩子中执行如下代码：
    Vue.prototype.$bus = this // 安装全局事件总线

#### 3-2 HelloWorld.vue组件 ####

<template>
      <div class="hello">
        <h1>HelloWorld组件数据msg的值--可被其他组件修改：{
       {msg}}</h1>
        <button @click="updateData">修改Student组件数据</button>
      </div>
    </template>
    
    <script>
    export default {
          
      name: 'HelloWorld',
      data(){
          
        return{
          
          msg:'HelloWorld',
        }
      },
      mounted() {
          
      	// 事件绑定，如果第二个参数直接传入函数，注意要使用箭头函数，否则this指向不对
        this.$bus.$on('changeHelloWorld',(data)=>{
          
          this.msg=data
        })
      },
      beforeDestroy(){
          
        this.$bus.$off('changeHelloWorld')
      },
      methods:{
          
        updateData(){
          
          // 触发Student组件的自定义事件changeStudent，参数数据为：'修改Student组件数据'
          this.$bus.$emit('changeStudent','修改Student组件数据')
        }
      },
    }
    </script>

#### 3-3 Student.vue组件 ####

<template>
      <div>
        <h1>Student组件数据msg的值--可被其他组件修改：{
       {msg}}</h1>
        <button @click="updateData">修改HelloWorld组件数据</button>
      </div>
    </template>
    
    <script>
    export default {
          
      name:'Student',
      data () {
          
        return {
          
          msg:'Student',
        };
      },
      mounted() {
          
      	// 事件绑定，如果第二个参数直接传入函数，注意要使用箭头函数，否则this指向不对
        this.$bus.$on('changeStudent',(data)=>{
          
          this.msg=data
        })
      },
      beforeDestroy(){
          
      	// 自定义事件解绑
        this.$bus.$off('changeStudent')
      },
      methods:{
          
        updateData(){
          
          // 触发HelloWorld组件的自定义事件changeHelloWorld，参数数据为：'修改HelloWorld组件数据'
          this.$bus.$emit('changeHelloWorld','修改HelloWorld组件数据')
        }
      },
    }
    </script>