this.$bus.$emit 事件变成动态的

时间: 2023-07-06 14:39:39 浏览: 100

vue 组件之间事件触发($emit)与event Bus($on)的用法说明

5星 · 资源好评率100%

Vue.js 是一款流行的前端框架，用于构建用户界面。在Vue中，组件是构建应用的基本单元，而组件之间的通信是实现复杂功能的关键。本文将详细介绍Vue组件间事件触发($emit)和Event Bus($on)的用法。 1. **父子组件间事件触发($emit)** 父子组件间的通信通常使用`props`向下传递数据，而子组件向父组件传递信息则使用`$emit`。当子组件需要通知父组件某个操作已完成或者需要父组件做出响应时，可以触发一个自定义事件。例如： ```vue // 子组件 <button @click="notifyParent">通知父组件</button> ... methods: { notifyParent() { this.$emit('custom-event', '这是要传递的数据'); } } // 父组件 <ChildComponent @custom-event="handleCustomEvent"></ChildComponent> ... methods: { handleCustomEvent(data) { console.log('接收到子组件的事件:', data); } } ``` 2. **Event Bus ($on/$emit)** 当需要在非父子关系的组件之间通信时，可以使用Event Bus，也称为全局事件总线。Event Bus 是一个独立的 Vue 实例，用来在任何组件之间发送和监听事件。创建一个 `bus.js` 文件来初始化 Event Bus： ```javascript import Vue from 'vue'; export default new Vue(); ``` 然后在需要通信的组件中导入并使用它： ```vue // 在孙子组件中触发事件 import Bus from './bus.js'; methods: { addCart(event) { Bus.$emit('getTarget', event.target); } } // 在爷爷组件中监听事件 import Bus from './bus.js'; created() { Bus.$on('getTarget', target => { console.log(target); }); } ``` 3. **补充知识：兄弟组件间通信** 如果两个没有直接父子关系的组件需要通信，可以利用Event Bus。首先确保两个组件都引入了同一个Event Bus实例，然后在一个组件中触发事件，另一个组件中监听并处理该事件。例如： ```vue // 兄弟组件A import Bus from './bus.js'; methods: { sendMessage() { Bus.$emit('message', '这是组件A的消息'); } } // 兄弟组件B import Bus from './bus.js'; created() { Bus.$on('message', (msg) => { console.log('组件B收到消息:', msg); }); } ``` 4. **Vuex 的使用** 对于更复杂的组件通信，特别是大型项目中，推荐使用Vuex，它是Vue的状态管理库。Vuex提供了一种集中式的存储方式，允许组件之间共享状态，同时提供了强大的工具来跟踪和控制状态变化。虽然Event Bus在简单场景下足够用，但随着应用复杂度增加，维护起来可能会变得困难，此时Vuex是更好的选择。总结，Vue组件间的通信是其灵活性和可复用性的重要体现。 `$emit` 用于子组件向父组件传递信息，Event Bus则提供了跨组件通信的途径，尤其适用于非父子组件。然而，对于大型项目，推荐使用Vuex来统一管理全局状态，以保持代码的整洁和可维护性。

要让事件名动态化，你可以使用方括号语法。例如，如果你有一个变量 `eventName` 包含要触发的事件名，你可以这样调用 `$emit` 方法： ``` this.$bus.$emit(eventName, payload); ``` 这样会动态地将 `eventName` 变量的值作为事件名，从而触发相应的事件。

阅读全文

this.$bus.$emit 事件变成动态的

相关推荐

Vue组件间通信：$emit与Event Bus实践解析

Vue.js 2.0 分页组件实现与$emit事件通信教程

this.$bus.$emit()

this.$bus.$emit传多个

this.$on和this.$emit的组件通信方法

this.$emit和uni.$emit

this.$bus.$emit("imgUploadFinish")

this.$emit和uni.$emit分别怎么用

vue2中this.$bus.$emit如何接受一个对象

this.$refs.typewriter.$emit('typewrite')

this.$bus.$emit('leftPanelClickProTotalNum', true)什么意思

this.$bus.emit

this.$emit this.$on this.$off

methods:{ showMapOutput(){ console.log('admin') this.$bus.$emit('menuShow') }

this.$bus.$emit

this.$bus.$emit+

this.$bus.$emit 参数

this.$on和this.$emit失效

this.$bus.&$emit

最新推荐

解决vue bus.$emit触发第一次$on监听不到问题

Font Awesome图标字体库提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式

俄罗斯RTSD数据集实现交通标志实时检测

管理建模和仿真的文件

预测区间与置信区间：机器学习中的差异与联系

基于KNN通过摄像头实现0-9的识别python代码

易语言开发的文件批量改名工具使用Ex_Dui美化界面

"互动学习：行动中的多样性与论文攻读经历"

【机器学习预测区间入门】：从概念到实现

如何修改QSpinBox的文字颜色？