vue3使用事件总线

Vue3的事件总线与Vue2有所不同。在Vue3中，移除了Vue.prototype.$on、Vue.prototype.$off、Vue.prototype.$once等方法，也取消了Vue.prototype属性的使用。因此，如果我们希望继续使用全局事件总线，需要通过第三方库来实现。

推荐的解决方案是使用mitt这个第三方库来实现全局事件总线。你可以使用 npm 或 yarn 安装 mitt，然后在代码中引用它。通过 mitt，你可以创建一个事件总线实例，并使用它来触发和监听事件，实现组件之间的通信。

下面是一个使用 mitt 的示例代码：

首先，安装 mitt:

npm install mitt

然后，在你的代码中引入 mitt：

import mitt from 'mitt'

接着，创建一个事件总线实例：

const bus = mitt()

现在，你可以在任何组件中使用 bus 来触发和监听事件了。比如，在一个组件中触发事件：

bus.emit('event-name', eventData)

在另一个组件中监听事件：

bus.on('event-name', eventData => {
  // 处理事件数据
})

通过以上方式，你可以在Vue3中使用 mitt 来实现全局事件总线，实现组件之间的通信。

相关问题

vue3全局事件总线使用

在Vue 3中，全局事件总线的实现方式与Vue 2有所不同。Vue 3推荐使用`mitt`库来实现全局事件总线的功能。下面是使用Vue 3和`mitt`库实现全局事件总线的示例：

首先，安装`mitt`库：

npm install mitt

然后，在你的Vue应用程序的入口文件（通常是`main.js`）中，设置全局事件总线：

import { createApp } from 'vue';
import mitt from 'mitt';

const app = createApp(App);

// 创建一个事件总线实例
const eventBus = mitt();

// 将事件总线实例挂载到Vue应用的全局属性中
app.config.globalProperties.$bus = eventBus;

app.mount('#app');

现在，你可以在任何组件中通过`this.$bus`来访问全局事件总线，并使用它来触发和监听事件。

在发送方组件中触发事件：

<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$bus.emit('message', 'Hello, EventBus!');
    }
  }
}
</script>

在接收方组件中监听事件：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.$bus.on('message', (text) => {
      this.message = text;
    });
  }
}
</script>

在接收方组件的`mounted`钩子函数中，我们使用`this.$bus.on`方法来监听名为`message`的事件，并在事件触发时更新组件的`message`数据。

这样，当发送方组件点击按钮时，会触发`message`事件，并传递消息内容给接收方组件，接收方组件会更新界面上的文本。这就完成了全局事件的传递与监听。

vue3全局事件总线

在Vue3中，由于没有了Vue构造函数和Vue.prototype，无法像Vue2那样直接实现全局事件总线。但是可以使用第三方插件mitt来实现类似的功能。首先，需要安装mitt插件，可以使用npm命令进行安装：npm i mitt。然后，创建一个event-bus.js文件，并在其中引入mitt插件。通过mitt方法创建一个事件总线对象$bus，并将其导出。在需要使用全局事件总线的组件中，可以直接导入$bus，并使用$bus.emit方法触发事件，使用$bus.off方法取消事件绑定，使用$bus.all.clear方法清除所有事件的绑定。这样就可以实现在Vue3中使用全局事件总线的功能了。