Vue笔记_方法_事件总线

EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁。

事件总线就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件。

使用步骤

• [1] 创建事件总线

  创建eventBus.js文件

  import Vue from 'vue';  
  export default new Vue();
  

• [2] 组件间传递数据：若是A组件想给B组件传递数据

  A组件

  import Bus from './eventBus.js'
  
  // Bus.$emit(event, 回调函数传参)
  Bus.$emit('editValue', 1)
  

  B组件

  import Bus from './eventBus.js'
  
  mounted(){
   // Bus.$on(event,callback)
   Bus.$on('editValue',value => {
     this.value = value
   })
  }
  

• 解析：$on是Vue实例化对象的方法，它主要用于在Vue实例中监听一个自定义事件，当自定义事件被触发时，可以执行一个回调函数来响应该事件。

  $on方法的语法如下：

  vm.$on(event,callback)
  

  触发事件的语法如下：

  vm.$emit(event, 回调函数传参)
  

  tips:$on方法只在当前Vue实例上进行自定义事件的监听，而不会影响其他实例

举例说明：h5页面嵌入到客户端，当客户端调用js方法时去修改某个组件的数据

• [1] 创建实例化对象

  创建eventBus.js文件

  import Vue from 'vue';  
  export default new Vue();
  

• [2] 客户端调用的js方法

  import bus from './eventBus.js'
  
  callbackjsmethods(){
   bus.$emit('openBox', 1}
  }
  

• [3] 需要修改数据的页面

   import bus from './eventBus.js'
  

  mounted(){
    bus.$on('openBox', data =>{
      console.log('开宝箱～', data)
    })
  }
  

• 上述案例中 当客户端调用js的callbackjsmethods方法时就会在控制台打印’开宝箱～’与1