vue组件之间的传值-bus

2023-12-28 29 阅读1分钟

使用Bus

vue中的bus事件,一般作为中央事件总线来使用, 使用场景

1、小型项目(大项目直接使用vuex)

2、两个没关联关系的组件(有关联关系的也可以使用,但是一般会不会这样使用)

A、B 组件是两个相互没关联的组件,A 组件要去调用 B 组件中的一个方法

使用方式

1、在main.js中直接挂载到原型上

// 直接挂载到原型上
Vue.prototype.$bus = new Vue();

2、组件 A 中使用`$emit`发送一个事件

<template>
  <div>
    <p>我是孙组件</p>
    <button @click="bus">bus事件</button>
  </div>
</template>

<script>
  export default {
    methods: {
      bus() {
        this.$bus.$emit('busEvent');
      },
    },
  };
</script>

3、在 B 组件中使用`$on`接受发送出来的事件

export default {
  methods: {
    print () {
      console.log('我是bus事件调用的打印的方法');
    }
  },
  mounted () {
    this.$bus.$on('busEvent', this.print);
  },
}
</script>