Vue 用 event bus 解决非父子组件的数据传递

开始

  在不使用vuex的情况下，实现非父子组件的数据传递。

  当然你项目中使用着vuex就不必要再用event bus了。

 

使用方法

  我们需要有一个 Vue 实例来充当通信媒介的作用

  创建一个 src/bus.js

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

  在组件A中使用 $on(eventName) 监听事件

import Bus from 'src/bus'  // 引入bus.js文件

export default {
  data () {
    return {
      title: ''
    }
  },
  created () {
    // $on
    Bus.$on('setTitle', text => {
      this.title = text;
    });
  }  
}        

  在组件B中使用 $emit(eventName) 触发事件

import Bus from 'src/bus'

export default {
  methods:{
    emitTitle () {
      Bus.$emit('setTitle', '我的标题')
    }
  }  
}

总结

  这个方法只是利用vue实例实现通讯。用$on、$emit来监听和触发事件。