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
<h1 @click="totestFather">mytest</h1>

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

4、監聽事件,執行任務

   created() {                //在created 或者 mounted 里面監聽即可
      Bus.$on('tofather', function (msg) {
        console.log(msg)
      })
   }
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容