日期：2023-07-28 14:33:11 来源：宇宙一码平川
在Vue.js中有一种使用event emitters通过父组件在两个子组件之间进行通信的方法。在子组件中设置事件并在父组件中设置侦听器时，响应式将通过父组件向下传递到嵌套组件。
虽然这是一个有价值的解决方案，但随着项目的发展，它可能会变得笨拙。事件总线是一个 Vue.js 实例，它可以在一个组件中发出事件，然后直接侦听并响应另一个组件中发出的事件——无需父组件的帮助。事件总线比发射器更高效，因为它需要更少的代码来运行。
在本教程中，我们将在 Vue.js 项目中创建一个事件总线，以促进两个组件之间通过私有通道进行通信。这通常称为发布-订阅方法。
(资料图)
这篇文章适合所有阶段的开发人员，包括初学者。在阅读本文之前，您应该已经具备以下几点：
已安装版本 14.18+ 及更高版本的Node.js。您可以通过在终端/命令提示符下运行以下命令来验证您是否具有此版本：
node -v安装了 npm 版本 6.x 及更高版本。在终端中使用以下命令验证安装的版本：npm -vVisual Studio Code Editor 或类似的代码编辑器运行以下命令来搭建 Vite 和 Vue 项目的基架：# npm 6.xnpm create vite@latest event-bus-tutorial --template vue# npm 7+, extra double-dash is needed:npm create vite@latest event-bus-tutorial -- --template vuecd event-bus-tutorialnpm install在 Vue 2.x 中，Vue 实例可用于触发通过事件发射器 API（$on、$off和$once） 强制附加的处理程序。
为了使用事件总线模式，你所要做的就是创建一个 Vue 构造函数的新实例，将该实例分配给一个名为eventBus的常量变量，然后将其导出。这个实例充当事件总线，允许 Vue 应用程序中的不同组件相互通信：
// eventBus.jsconst eventBus = new Vue()export default eventBus导入 eventBus 实例并在要接收事件的组件中，添加事件侦听器：
// ChildComponent.vueimport eventBus from "./eventBus"export default { mounted() { // adding eventBus listener eventBus.$on("custom-event", () => { console.log("Custom event triggered!") }) }, beforeDestroy() { // removing eventBus listener eventBus.$off("custom-event") }}导入eventBus实例并在要发送事件的组件中，添加事件发射器：
// ParentComponent.vueimport eventBus from "./eventBus"export default { methods: { sendCustomEvent() { // sending the event eventBus.$emit("custom-event") } }}在 Vue 3 中，$on、$off和$once方法已从 Vue 实例中完全删除。因此，为了使用事件总线模式，必须安装外部事件发射器和侦听器包，例如mitt。
使用以下命令安装mitt包并开始提供应用程序：
npm install --save mittnpm run devmain.js 打开位于目录 src 中的文件，并修改其中的代码，如下所示：
import { createApp } from "vue"import mitt from "mitt"import App from "./App.vue"const emitter = mitt()const app = createApp(App)app.config.globalProperties.emitter = emitterapp.mount("#app")这段代码通过创建一个发射器实例，使其通过 Vue 应用程序实例全局访问，并将应用程序挂载到 DOM 中，将 mitt 事件发射器库与 Vue 3 应用程序集成。这允许组件使用发射器发出和侦听事件，而无需直接导入。
创建我们的子组件在我们的演示中，我们将创建两个子组件，它们需要在不使用父组件作为中介的情况下相互通信。首先，在components目录中创建一个名为Child1.vue的新文件，并将以下代码块粘贴到其中：
<script >export default { name: "Child1", data: () => ({ counter: 0, }), methods: {},};</script>总体而言，此代码呈现一个 在 这个 Vue 组件渲染一个 现在，转到您的 在 现在，两个组件已准备就绪，您可以在组件中侦听 在这里， 该方法 设置事件后，我们需要让第二个组件侦听并响应事件。打开文件 该代码使用 该 单击组件上的“Increment”按钮时， 在大多数情况下，不建议使用全局事件总线来促进组件之间的通信。虽然它最初似乎是最简单的解决方案，但随着时间的推移，它经常导致重大的维护挑战。 根据具体情况，Vue 开发团队推荐了几种替代方法，而不是依赖事件总线： 这是对 Vue.js 中事件总线的介绍。事件总线充当组件之间易于实现的独立通信，无需通过中央组件或父组件。 虽然事件总线最初似乎是组件间通信的便捷方法，但建议探索替代选项，例如provide/inject或全局状态管理。这些替代方案为促进组件之间的通信提供了更强大且可维护的解决方案。 标签：
下一篇：
最后一页
在 Vue.js 中使用事件总线在组件之间传递数据 第二套人民币收藏价格（2023年7月28日） 郭广昌不爱金徽爱舍得 热苏斯致敬大卫-席尔瓦：曾和你一起并肩作战是我的荣幸 欧洲央行宣布再次加息25个基点 新华保险7月28日盘中涨幅达5% 德阳中小企业服务有限公司入选省首批入库服务机构 山西省首届不动产登记职业技能竞赛圆满举办 打造更有温度的护理服务（无影灯） 临汾市尧都区大阳镇卫生院院长李彦峰接受纪律审查和监察调查 四川黑老大刘汉的传奇一生，他的发迹史还有和十二个女明星的故事 浙商证券：盈利改善仍需政策加力 库存寻底重在提振内需 发生了什么？美股突然大跌 存货计划法(关于存货计划法简述) 【观察】中国视听节目对非洲传播取得重大进展 “生鲜灯”如何“禁”？市场希望出台执行细则 “京·彩”北京文化网络传播活动启动 给退役军人的节日礼物！湖北集中发布退役军人和其他优抚对象第二批省级优待项目 大运会社交传统”换pin“是什么？ “财大气粗”的米哈游，想和二创作者们交个朋友 华为鸿蒙4即将发布，车机系统、多模态交互等领域实现突破 USDA干旱报告 美股异动丨麦当劳(MCD.US)盘前涨2.5%，Q2营收超预期 大运村科技服务 | 成都智造 让“方便”更方便 云南：2023年7月27日录取日报包含样式的
。该组件还具有内部数据属性counter设置为0和空methods属性。components目录中创建一个名为Child2.vue的新文件，并在其中粘贴以下代码块： <script>export default { name: "Child2", data: () => ({ counter: 0, }),};</script>{{ counter }}
包含样式标题
的组件。该counter值动态显示在标题中。App.vue文件并将其整个代码替换为以下内容： <script>import Child1 from "./components/Child1.vue";import Child2 from "./components/Child2.vue";export default { name: "app", components: { Child1, Child2, },};</script>App.vue组件内部，代码导入并呈现样式化的父 div 中的Child1和Child2组件。Child2事件时，通过在Child1组件中发出来设置事件。打开文件Child1.vue并将以下代码块复制到其中： <script >export default { name: "Child1", data: () => ({ counter: 0, }), methods: { sendEvent() { this.counter += 1; this.emitter.emit("increment", { msg: this.counter }); }, },};</script>onclick事件侦听器被添加到button元素中。触发此事件时，将调用名为sendEvent()的方法。sendEvent()将计数器值递增 1，并使用全局事件发射器向任何父组件或同级组件发出具有更新counter值的事件increment。Child2.vue并复制到以下代码块中： <script>export default { name: "Child2", data: () => ({ counter: 0, }), mounted() { this.emitter.on("increment", (data) => { this.counter = data.msg; }); },};</script>{{ counter }}
mounted生命周期挂钩在应用程序挂载到 DOM 上时初始化侦听过程。emitter.on语句现在正在侦听increment事件，向下传递data参数，并将其设置为新计数器：increment事件将与更新counter的值一起发送到Child2和Child1组件。
热门推荐
猜你喜欢
28
2023-07
28
2023-07
28
2023-07
28
2023-07
28
2023-07
28
2023-07
28
2023-07
28
2023-07
28
2023-07
28
2023-07
28
2023-07
28
2023-07
28
2023-07
28
2023-07
28
2023-07
28
2023-07
28
2023-07
27
2023-07
27
2023-07
27
2023-07
27
2023-07
27
2023-07
27
2023-07
27
2023-07
27
2023-07