Vue---兄弟元件通訊(三種方式)
阿新 • • 發佈:2019-01-23
第一種: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_