eventBus實(shí)現(xiàn)兄弟,父子之間傳值

寫這個(gè)的目的是為了記錄我之前踩得坑,我真的好希望兩個(gè)月之前我 能看到我寫的這篇文章。
因?yàn)槲覀兊捻?xiàng)目比較小,所以沒有用vuex,兄弟組件之間傳值比較麻煩,下面是比較好的一種方法

eventBus主要是采用一個(gè)空的Vue實(shí)例作為中央事件主線,采用觸發(fā)事件,監(jiān)聽事件執(zhí)行即可
我這里有父組件是 Hello.vue,子組件是testA.vue和testB.vue

1、新建一個(gè)js文件,作為中央事件主線,命名為bus.js

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

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

import Bus from 'common/js/bus.js';   //這里是根據(jù)你自己的路徑來寫的

3、觸發(fā)事件(隨便哪里觸發(fā)都可以)

html
<h1 @click="totestFather">mytest</h1>

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

4、監(jiān)聽事件,執(zhí)行任務(wù)

   created() {                //在created 或者 mounted 里面監(jiān)聽即可
      Bus.$on('tofather', function (msg) {
        console.log(msg)
      })
   }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容,還有我對(duì)于 Vue 1.0 印象不深的內(nèi)容。關(guān)于...
    云之外閱讀 5,174評(píng)論 0 29
  • Vue 實(shí)例 屬性和方法 每個(gè) Vue 實(shí)例都會(huì)代理其 data 對(duì)象里所有的屬性:var data = { a:...
    云之外閱讀 2,365評(píng)論 0 6
  • 眾所周知,太陽(yáng)能是取之不盡、用之不竭的,也沒有污染,因此,我希望未來世界的主導(dǎo)能源是太陽(yáng)能。 未來的世界,每家每戶...
    MYK0324閱讀 1,306評(píng)論 0 0

友情鏈接更多精彩內(nèi)容