Vue兄弟组件间传值应用、事件总线、emit、on

1、eventBus方式

第一步

创建eventBus.js文件，此文件可以放在src文件夹下的任何位置。我这里放在utils文件夹下。eventBus.js也可以全局挂载，也就是在main.js文件中处理，我这里按需引入。

// "vue"不能写成"Vue" // 会找不到 import Vue from "vue"; export default new Vue; 

第二步

创建两个子组件，分别是one.vue和two.vue。

one.vue传值组件

export default { data() {}, mounted() {}, methods: { // 标签上绑定的处理事件 handlerSearch() { let obj = { title: "标题", page: 1 }; eventBus.$emit("search", obj); } } } 

two.vue接收组件

export default { data() {}, mounted() { // 在组件实例创建时不会调用此代码段 eventBus.$on("search", (val) => { console.log('val:', val); }); }, methods: {} } 

eventBus方式结束。