vue中bus的详细使用

vue中关于兄弟组件bus的使用方法

首先，bus可以用在任何组件之间的传值

废话不多说，请看下面代码解说

首先，先创建bus.js文件，然后在引用，这里有两种引用方法：局部引用和全局引用。

// bus.js文件内容
import Vue from 'vue'
// export default new Vue()
const Bus = new Vue()
export default Bus

局部引用：是在组件的文件里面引用bus.js文件

全局引用：是在main.js里面直接引用

import Bus from '../src/bus' //这是我的路径，正确引用你们的路径
Vue.prototype.$bus = Bus 

接下来，请注意：

1、这是我创建的父元素（共同的）bus.vue文件

// bus.vue
<template>
  <div>
    <bus-learn></bus-learn>
    <bus-test></bus-test>
  </div>
</template>

<script>
// import Bus from "@/bus.js";
import busLearn from "./busLearn.vue";
import busTest from "./busTest.vue";
export default {
  name: "busOne",
  data() {
    return {
      elementValue: 4,
    };
  },
  methods: {},
  components: {
    busLearn,
    busTest,
  },
};
</script>

2、这是我创建的子元素（也是第一个兄弟组件）busLearn.vue文件

// busLearn.vue
<template>
  <div>
    <div @click="event">bus学习</div>
    <div>{{ objct.name }}</div>
    <div>{{ objct.price }}</div>
    <div>{{ objct.color }}</div>
  </div>
</template>

<script>
export default {
  name: "busLearn",
  data() {
    return {
      message: [1, 2, 3, 4, 5],
      objct: {},
    };
  },
  methods: {
    event() {
    //用局部引用的时候 this.$bus改成Bus，跟上面引用的名字一样
      this.$bus.$emit("busEvent", this.message);
    },
  },
  mounted() {
  //用局部引用的时候 this.$bus改成Bus，跟上面引用的名字一样
    this.$bus.$on("test", (data) => {
      this.objct = data;
    });
  },
};
</script>

3、这是我创建的子元素（也是第二个兄弟组件）busTest.vue文件

// busTest.vue
<template>
  <div>
    <div @click="eventTest">bus测试</div>
    <div v-for="(item, index) in message" :key="index">{{ item }}</div>
  </div>
</template>

<script>
// import Bus from "@/bus.js";
export default {
  name: "busTest",
  data() {
    return {
      message: [],
      objct: {
        name: "衣服",
        price: "78元",
        color: "red",
      },
    };
  },
  mounted: function () {
  //用局部引用的时候 this.$bus改成Bus，跟上面引用的名字一样
    this.$bus.$on("busEvent", (mes) => {
      this.message = mes;
    });
  },
  methods: {
    eventTest() {
    //用局部引用的时候 this.$bus改成Bus，跟上面引用的名字一样
      this.$bus.$emit("test", this.objct);
    },
  },
};
</script>

总结：1、o n 和 on和on和emit第一个参数一定得是一样的。
2、在要传值的组件页面中用e m i t ， 在 要 拿 到 值 的 兄 弟 组 件 页 面 中 用 emit，在要拿到值的兄弟组件页面中用emit，在要拿到值的兄弟组件页面中用on