亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Vue兄弟組件事件觸發和通信問題,Vuex完全不會用

Vue兄弟組件事件觸發和通信問題,Vuex完全不會用

萬千封印 2018-09-03 16:05:13
本來想用Vuex狀態管理的,但是在兄弟組件事件觸發上遇到了很大的問題,只好按官方的說法用了總線的形式:var bus = new Vue();//A組件觸發:methods: {        //上傳方法        confirmEdit(){            bus.$emit('confirmEdit');        },    }//B組件調用:created (){    bus.$on('confirmEdit', () => {        this.addModal.name = somthing        this.customAlertFunc(...)    }也用到了store:    var store = new Vuex.Store({        state: {            shopId:parseURL().shopId,            reservationShopList:[],            isTabHide: false,            isEdit: false,        }    });結果只是用來儲存一部分變量,其實換成全局變量也完全可以= =|| :    var commonData = {        shopId: parseURL().shopId,        reservationShopList: [],        isTabHide: false,        isEdit: false,    }網上也找不到Vuex的正確的使用方法啊…這玩意到底怎么用?和全局變量區別在哪里?怎么用Vuex把總線替掉?問題補充:求一個總線的Vuex實現
查看完整描述

2 回答

?
慕婉清6462132

TA貢獻1804條經驗 獲得超2個贊

如果只是想兄弟組件通信的話, 可以不使用vuex, 通過一個全局的事件機制就行了

可以這樣做
var eventBus = new Vue()
然后在兄弟組件里面引用這個Vue 實例, 通過$on 和 $emit 就可以了


查看完整回答
反對 回復 2018-09-09
?
婷婷同學_

TA貢獻1844條經驗 獲得超8個贊

實際上vue1.X里面是有類似方法的,$dispatch 和 $broadcast,就是和總線相同的用法。
但是在vue2.X被移除了,原因是事件流會因此變得脆弱而難以理解,Bus實際是broadcast的升級版:

通過使用事件中心,允許組件自由交流,無論組件處于組件樹的哪一層。由于 Vue 實例實現了一個事件分發接口,你可以通過實例化一個空的 Vue 實例來實現這個目的。

如果要改寫成VUEX,推薦的做法是把所有數據,和相關方法全部置入store,所有子組件只需要發送mutation調取store中的方法和數據,雖然看起來這種做法會讓store顯得過于臃腫龐大,但是對于復雜系統的構建是更具優勢的。而且官方也提供了將store切分的解決方案。


查看完整回答
反對 回復 2018-09-09
  • 2 回答
  • 0 關注
  • 1938 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號