写这个的目的是为了记录我之前踩得坑,我真的好希望两个月之前我 能看到我写的这篇文章。
因为我们的项目比较小,所以没有用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)
})
}