Vue 用$emit与$on来进行兄弟组件之间的数据传输通信

方法一：在src根目录下创建bus.js文件

// bus.js
import Vue from 'vue';
export default new Vue();

父组件

<template>
  <div>
    <pageOne></pageOne>
    <pagTwo></pagTwo>
  </div>
</template>
<script>
import pageOne from "../components/pageOne.vue";
import pagTwo from "../components/pagTwo.vue";
export default {
  components: { pageOne, pagTwo },
  data() {
    return {};
  },
};
</script>

子组件pageOne.vue发送事件

<template>
  <div>
    <h1>pageOne页面</h1>
    <button @click="setData" style="margin-left: 16px">传值过去</button>
  </div>
</template>
<script>
import Bus from "../utils/bus";
export default {
  name: "pageOne",
  data() {
    return {
      num: 8000,
    };
  },
  methods: {
    setData() {
      Bus.$emit("changeNum", this.num); //$emit用来发送事件
    },
  },
};
</script>
<style scoped>
</style>

子组件pageTwo.vue接收事件

<template>
  <div>
    <h1>pageTwo页面</h1>
    <p>传过来的值：{{ newNum }}</p>
  </div>
</template>
<script>
import Bus from "../utils/bus";
export default {
  name: "pageTwo",
  data() {
    return {
      newNum: "",
    };
  },
  mounted() {
    Bus.$on("changeNum", this.getNum);
  },
  methods: {
    getNum(num) {
      console.log("传过来的数为：", num);
      this.newNum = num;
    },
  },
  beforeDestroy() {
    //取消监听'changeNum'事件
    Bus.$off("changeNum");
  },
};
</script>
<style scoped>
</style>

方法二：在main.js全局创建EventBus

 

父组件同上

子组件pageOne.vue发送事件

<template>
  <div>
    <h1>pageOne页面</h1>
    <p>子组件pageOne输入框:</p>
    <input type="text" v-model="text" @change="textChange(text)" />
  </div>
</template>
<script>
export default {
  name: "pageOne",
  data() {
    return {
      text: "",
    };
  },
  methods: {
    textChange(val) {
      this.$eventBus.$emit("changeData", this.text); //$emit用来发送事件
    },
  },
};
</script>
<style scoped>
</style>

子组件pageTwo.vue接收事件

<template>
  <div>
    <h1>pageTwo页面</h1>
    <p>子组件pageTwo获取数据:{{ childData }}</p>
  </div>
</template>
<script>
export default {
  name: "pageTwo",
  data() {
    return {
      childData: "",
    };
  },
  mounted() {
    this.$eventBus.$on("changeData", (val) => {
      this.childData = val;
    });
  },
  beforeDestroy() {
    //取消监听'changeData'事件
    this.$eventBus.$off("changeData");
  },
};
</script>
<style scoped>
</style>