寫這個(gè)的目的是為了記錄我之前踩得坑,我真的好希望兩個(gè)月之前我 能看到我寫的這篇文章。
因?yàn)槲覀兊捻?xiàng)目比較小,所以沒有用vuex,兄弟組件之間傳值比較麻煩,下面是比較好的一種方法
eventBus主要是采用一個(gè)空的Vue實(shí)例作為中央事件主線,采用觸發(fā)事件,監(jiān)聽事件執(zhí)行即可
我這里有父組件是 Hello.vue,子組件是testA.vue和testB.vue
1、新建一個(gè)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)
})
}