vue兄弟组件传参

eventbus（兄弟组件传参）

应用场景：拥有共同父级页面的两个页面传参
原理：vue一个新的实例，类似于一个站，连接着两个组件，也就是一个中央事件总线；
实战：

在utils文件下创建一个bus实例：

1627870785(1).png

import Vue from 'vue'
export default new Vue()

通过Bus.$emit()传参

1.在需要传参的页面引入Bus文件
2.通过Bus.$emit('name'，'value')传参

1627870968(1).png

Bus.$emit('sendBybus', this.ofertimes)

(pass:$emit实例方法触发当前实例(这里的当前实例就是bus)上的事件,附加参数都会传给监听器回调。)

通过Bus.$on("name", data => {});

1.在需要接收的页面引入Bus文件
2.通过Bus.$on("name", data => {});接收

1627871693(1).png

//写在created或mounted中均可以
created() {
  eventBus.$on("name", data => {
    console.log("A组件传给B组件的", data);
  });
}

(pass:on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由emit触发，回调函数会接收所有传入事件触发函数($emit)的额外参数。)