bus.js非父子组件之间通讯
生活随笔
收集整理的這篇文章主要介紹了
bus.js非父子组件之间通讯
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
bus.js非父子組件之間通訊
區別:
bus.js就是一個公共的vue實例專門處理emit和on事件。
vuex.js是做全局數據處理的,是指限定了對公共數據的使用處理方法,統一管控
vue中非父子組件之間通信除了使用vuex,也可以通過bus總線,兩者適用場景不同。
bus適合小項目、數據被更少組件使用的項目,對于中大型項目 數據在很多組件之間使用的情況 bus就不太適用了。bus其實就是一個發布訂閱模式,利用vue的自定義事件機制,在觸發的地方通過emit向外發布一個事件,在需要監聽的頁面,通過emit向外發布一個事件,在需要監聽的頁面,通過emit向外發布一個事件,在需要監聽的頁面,通過on監聽事件。
vuex適用中大型項目、數據在多組件之間公用的情況。
1.bus.js文件: assets目錄下
import Vue from 'vue' // 創建通訊實例 var bus = new Vue() export default bus2.在需要通訊的頁面引入:
import Bus from '@/assets/common/bus'3.在數據發起方發送:
Bus.$emit('getCode',this.openDialog1.groupid)4.數據接收方獲取:mounted里
Bus.$on('getCode', function (msg) { // 獲取小助手列表var param = new FormData()param.append('groupid', msg)_PhPApi.getGroupInfo(param).then(res => {this.tableData = res.data.assistantInfo}) }.bind(this))總結
以上是生活随笔為你收集整理的bus.js非父子组件之间通讯的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 四十四种Javascript技巧大全
- 下一篇: Vue+element-ui 实现表格的