寫這個的目的是為了記錄我之前踩得坑,我真的好希望兩個月之前我 能看到我寫的這篇文章缨恒。
因為我們的項目比較小谴咸,所以沒有用vuex,兄弟組件之間傳值比較麻煩骗露,下面是比較好的一種方法
eventBus主要是采用一個空的Vue實例作為中央事件主線岭佳,采用觸發(fā)事件,監(jiān)聽事件執(zhí)行即可
我這里有父組件是 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'; //這里是根據(jù)你自己的路徑來寫的
3禀崖、觸發(fā)事件(隨便哪里觸發(fā)都可以)
html
<h1 @click="totestFather">mytest</h1>
js
methods:{
totestFather:function () {
Bus.$emit('tofather', this.sendMsg); //這里是傳遞的信息
}
}
4衩辟、監(jiān)聽事件,執(zhí)行任務(wù)
created() { //在created 或者 mounted 里面監(jiān)聽即可
Bus.$on('tofather', function (msg) {
console.log(msg)
})
}