介绍
在vue js中，我们基本上有两种使无关组件相互通信的方式：
-
事件总线
在official documentation上，我们可以阅读：
在大多数情况下，不建议使用全球事件总线在组件之间进行通信。虽然它通常是短期最简单的解决方案，但从长远来看，它几乎总是被证明是一种维护头痛。
从长远来看，通常最好使用vuex。
同样在official documentation中，您可以看到事件总线实现如何从VUE 2变为VUE 3
脚手架项目
在本教程中，我们将使用Vite Build Tool来踩踏项目
# npm 6.x
npm init vite@latest vue-event-bus-1 --template vue
# npm 7+, extra double-dash is needed:
npm init vite@latest vue-event-bus-1 -- --template vue
然后，我们需要安装一个实现事件发射极接口的外部库，在这种情况下为mitt
npm install --save mitt
该项目
该项目由两个简单组件组成， firstComponent.Vue 和 secondComponent.vue ，当我们单击 secondcomponent中的EMIT事件按钮时。强>在** firstComponent.vue **变更**的字符串变为字符串，这要归功于事件总线
代码
在** main.js **我们创建一个用于全球使用的MITT实例
import { ***createApp ***} from 'vue'
import mitt from 'mitt'
import App from './App.vue'
const emitter = mitt()
const app = ***createApp***(App)
app.config.globalProperties.emitter = emitter
app.mount('#app')
现在我们可以在全球访问Emitter，因此在 firstComponent.vue 中，我们订阅了secondcomponent.vue.vue。
发出的事件。让我们看看 firstComponent.vue
<script>
export default {
data: function () {
return {
testEvent: 'String to change'
}
},
created (){
this.emitter.on('my-event', (evt) => {
this.testEvent = evt.eventContent;
})
}
}
</script>
现在在** secondcomponent.vue **发出事件
<template>
<div style="border: 1px solid black;">
<h1>Second Component</h1>
<button v-on:click="emitMyEvent">Emit Event</button>
</div>
</template>
<script>
export default {
methods: {
emitMyEvent() {
this.emitter.emit('my-event', {'eventContent': 'String changed'})
}
}
}
</script>
github
您可以在github上找到本教程的代码：CertosinoLab/mediumarticles at vue-event-bus-1 (github.com)
谢谢您的阅读！