vue中兄弟组件通信与$off使用方法

使用$on、$emit实现兄弟组件间的传值
$off使用方式见子组件 a.vue

1、创建一个js文件，比如bus.js

import Vue from 'Vue'

export default new Vue

2、父组件

<template>
  <div class="hello">
    <aaa></aaa>
    <bbb></bbb>
  </div>
</template>

<script>
import aaa from "./a";
import bbb from "./b";
export default {
  name: "HelloWorld",
  data() {
    return {
      msg:''
    };
  },
  components: {
    aaa,
    bbb,
  },
  methods: {},
  mounted() {},
};
</script>

<style lang="less" scoped>
</style>

3、创建两个子组件a.vue与b.vue

a.vue

<template>
  <div>
    {{ msg }}
    <button @click="fn">点击传值</button>
    <button @click="remove">移除事件</button>
  </div>
</template>

<script>
import bus from "../commonjs/bus";
export default {
  name: "",
  data() {
    return {
      msg: "(我是a组件的值)",
    };
  },

  components: {},
  methods: {
    fn() {
      bus.$emit("aMsg", this.msg);
      bus.$emit("aMsg2", "第二个事件");
    },
    remove() {
      /*
      	bus.$off()为清除bus上绑定的事件
      	如果不写参数，则默认为清除所有事件
      	*/
      //多个事件为数组，单个事件为字符串

      // bus.$off('aMsg2')
      bus.$off(["aMsg2", "aMsg"]);
    },
  },
};
</script>

<style scoped>
</style>

b.vue

<template>
  <div>
    <p>{{ msg }}</p>
    <p>{{ msg2 }}</p>
  </div>
</template>

<script>
import bus from "../commonjs/bus";
export default {
  name: "",
  data() {
    return {
      msg: "",
      msg2: "",
    };
  },

  components: {},

  methods: {
  },

  mounted() {
    bus.$on("aMsg", (data) => {
      this.msg = data;
    });
    bus.$on("aMsg2", (data) => {
      this.msg2 = data;
    });
  },
};
</script>

<style scoped>
</style>