eventBus实现兄弟,父子之间传值

写这个的目的是为了记录我之前踩得坑,我真的好希望两个月之前我 能看到我写的这篇文章。
因为我们的项目比较小,所以没有用vuex,兄弟组件之间传值比较麻烦,下面是比较好的一种方法

eventBus主要是采用一个空的Vue实例作为中央事件主线,采用触发事件,监听事件执行即可
我这里有父组件是 Hello.vue,子组件是testA.vue和testB.vue

1、新建一个js文件,作为中央事件主线,命名为bus.js

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

2、在需要用到的组件引用(父组件,子组件都可以引用)

import Bus from 'common/js/bus.js';   //这里是根据你自己的路径来写的

3、触发事件(随便哪里触发都可以)

html

mytest

js methods:{ totestFather:function () { Bus.$emit('tofather', this.sendMsg); //这里是传递的信息 } }

4、监听事件,执行任务

   created() {                //在created 或者 mounted 里面监听即可
      Bus.$on('tofather', function (msg) {
        console.log(msg)
      })
   }

你可能感兴趣的:(eventBus实现兄弟,父子之间传值)