Vue Bus全局事件中心简单Demo详解

什么是Vue Bus？

Vue Bus是一种在Vue应用程序中使用的全局事件总线（Event Bus），它提供了一种简单而有效的方法来管理应用程序中的组件之间的通信。

如何使用Vue Bus？

使用Vue Bus非常简单。首先，我们需要在项目中安装Vue Bus：

npm install vue-bus --save

然后，我们需要在Vue项目中引入并使用Vue Bus：

import Vue from 'vue'
import VueBus from 'vue-bus'

Vue.use(VueBus)

现在，我们可以在任何Vue组件中使用Vue Bus了。

Vue Bus的常用方法

Vue Bus提供了以下常用方法：

• $on(event, callback)：监听一个事件。
• $once(event, callback)：监听一个一次性事件。
• $emit(event, args)：触发一个事件，并传递其参数。
• $off(event, callback)：取消事件监听。

示例1：父子组件传值

下面我们演示一个简单的Vue Bus示例，用于在父组件和子组件之间传递数据。在这个例子中，我们将创建一个父组件Parent，一个子组件Child，然后在父组件中使用Vue Bus将数据传递给子组件。

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from '@components/ChildComponent.vue';

export default {
  name: 'Parent',
  methods: {
    sendData(data) {
      // 触发事件，并传递数据
      this.$bus.$emit('send-data', data);
    }
  },
  components: {
    ChildComponent,
  },
};
</script>

<template>
  <div>{{ receivedData }}</div>
</template>

<script>
export default {
  name: 'ChildComponent',
  data() {
    return {
      receivedData: '',
    };
  },
  created() {
    // 监听事件，接收传递的数据
    this.$bus.$on('send-data', (data) => {
      this.receivedData = data;
    });
  },
};
</script>

在这个例子中，我们从父组件中的sendData()方法中触发一个名为 send-data 的事件，并将数据传递给子组件。在子组件中，我们使用 $bus.$on() 方法来监听事件，并接收传递的数据。

示例2：非父子组件传值

在Vue中，如果我们需要在非父子组件之间共享数据，通常会使用状态管理器（如Vuex）。但是，在某些场景下，使用Vue Bus也是一种更加方便快捷的做法。

下面我们演示一个Vue Bus在非父子组件之间传值的示例。在这个例子中，我们创建了三个组件：Sender、Receiver1和Receiver2。点击Sender组件中的按钮，将向两个接收组件分别发送不同的数据。

<template>
  <div>
    <button @click="sendData1">Send to Receiver1</button>
    <button @click="sendData2">Send to Receiver2</button>
  </div>
</template>

<script>
export default {
  name: 'Sender',
  methods: {
    sendData1() {
      // 触发事件，传递数据
      this.$bus.$emit('send-data-1', 'Data for Receiver1');
    },
    sendData2() {
      // 触发事件，传递数据
      this.$bus.$emit('send-data-2', 'Data for Receiver2');
    },
  },
};
</script>

<template>
  <div>{{ receivedData }}</div>
</template>

<script>
export default {
  name: 'Receiver1',
  data() {
    return {
      receivedData: '',
    };
  },
  created() {
    // 监听事件，接收传递的数据
    this.$bus.$on('send-data-1', (data) => {
      this.receivedData = data;
    });
  },
};
</script>

<template>
  <div>{{ receivedData }}</div>
</template>

<script>
export default {
  name: 'Receiver2',
  data() {
    return {
      receivedData: '',
    };
  },
  created() {
    // 监听事件，接收传递的数据
    this.$bus.$on('send-data-2', (data) => {
      this.receivedData = data;
    });
  },
};
</script>

在这个例子中，我们分别在Sender组件中触发了两个事件，并向两个接收组件分别传递了不同的数据。Receiver1和Receiver2组件分别监听了这两个事件，并接收了传递过来的数据。

这就是Vue Bus的简单示例说明。除此之外，Vue Bus还有更多的用法和方法，可以根据实际需求进行深入了解和使用。