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和 onemit第一个参数一定得是一样的。
2、在要传值的组件页面中用 e m i t , 在 要 拿 到 值 的 兄 弟 组 件 页 面 中 用 emit,在要拿到值的兄弟组件页面中用 emiton。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐