兄弟组件通信

在src中新建一个Bus.js的文件，然后导出一个空的vue实例

定义一个点击按钮，点击发送组件B里的数据

在传输数据的一方引入Bus.js  然后通过Bus.$emit(“事件名”,"参数")来来派发事件，数据是以$emit()的参数形式来传递

<template>
  <div class="A">
    <button @click="add">A按钮</button>
  </div>
</template>

<script>
import bus from "../bus/bus";
export default {
  props: [],
  data() {
    return {
      msg: "我是组件A的数据",
    };
  },
  mounted() {},
  methods: {
    add() {
      bus.$emit("add", this.msg);
    },
  },
};
</script>
<style scoped>
.A{
  width: 200px;
  height: 100px;
  background: yellow;
  margin: 0 auto;
}
</style>

在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on("事件名",(data)=>{data是接受的数据})

<template>
  <div class="B">
    B组件
    <h3>{{ data }}</h3>
  </div>
</template>

<script>
import bus from "../bus/bus";
export default {
  props: [],
  data() {
    return {
      data: "",
    };
  },
  mounted() {
    bus.$on("add", (data) => {
      this.data = data;
    });
  },
  methods: {},
  computed: {},
  components: {},
  watch: {},
};
</script>
<style scoped>
.B {
  width: 200px;
  height: 100px;
  background: pink;
  margin: 0 auto;
}
</style>

效果图