1. 程式人生 > >Vue---兄弟元件通訊(三種方式)

Vue---兄弟元件通訊(三種方式)

第一種:eventBus

    新建一個js檔案, 我這裡叫做 bus.js,

    檔案內容:

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

   然後在你需要觸發的 元件中引入   import   bus  from  '檔案路徑'

         執行:bus.$emit('觸發名稱', 傳輸的資料 )

最後在你需要的通訊的另一個元件中   mounted生命週期鉤子中執行如下:

    bus.$on('觸發名稱', res => {

    //寫你需要的方法

})

第二種:直接在 main.js中 直接如下

然後其中一個兄弟元件 執行

this.$root.vm.$emit('觸發名稱', 傳輸的資料);

另一個兄弟元件中執行

this.$root.vm.$on('觸發名稱', 傳輸的資料);

第三種:同樣是直接在 main.js

Vue.prototype.$vm = new Vue();

使用:this.$vm.$emit(); 

           this.$vm.$on();

注意:emit  和 on 中 第一引數 觸發名稱 必須相同,同時二者原理一致

如有問題  可以加我微信  dp319_