寫這個的目的是為了記錄我之前踩得坑,我真的好希望兩個月之前我 能看到我寫的這篇文章。
因為我們的項目比較小,所以沒有用vuex,兄弟組件之間傳值比較麻煩,下面是比較好的一種方法
eventBus主要是采用一個空的Vue實例作為中央事件主線,采用觸發事件,監聽事件執行即可
我這里有父組件是 Hello.vue,子組件是testA.vue和testB.vue
1、新建一個js文件,作為中央事件主線,命名為bus.js
import Vue from 'vue';
export default new Vue();
2、在需要用到的組件引用(父組件,子組件都可以引用)
import Bus from 'common/js/bus.js'; //這里是根據你自己的路徑來寫的
3、觸發事件(隨便哪里觸發都可以)
html
<h1 @click="totestFather">mytest</h1>
js
methods:{
totestFather:function () {
Bus.$emit('tofather', this.sendMsg); //這里是傳遞的信息
}
}
4、監聽事件,執行任務
created() { //在created 或者 mounted 里面監聽即可
Bus.$on('tofather', function (msg) {
console.log(msg)
})
}