code點滴

我們可以透過props、emit來溝通父子元件，而event bus則是溝通同層組件，但由於太常使用會造成元件複雜化、維護困難，所以當專案龐大時還是請使用Vuex哦!! 那我們來看看怎麼用event bus吧~ 創建一個bus.js來當作橋梁，當要使用時再呼叫。 import Vue from 'vue' export default new Vue() 這樣我們就創造出了一個新的vue的實例。再我們需要的地方做引入。 import bus from './bus.js' 接著我們在要發送資訊或要呼叫事件的地方，做一個中樞廣播動作。 export default { methods: { doSomething: function() { bus.$emit('Event', { msg: 'Test.' }); } } } 在任何想要接收訊息的地方去做接收的動作。 created(){ bus.$on('Event',data=>{ this.myname=data; }) }, beforeDestroy: function() { // [銷毀監聽事件] // 最好在组件銷毀前，清除 Event 所有監聽 // 如果要指定哪個監聽對應方法，就需要傳入第二個參數(對應$on設定的方法) bus.$off('Event'); } 這樣就能在任何的元件中可以拿到想要的數據，但如果是父子元件則不建議使用。