首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

EventBus.$on似乎没有捕捉到正在发出的事件。(Vue js)

EventBus.$on是Vue.js中的一个方法,用于监听事件。当事件被触发时,注册的回调函数将被调用。如果EventBus.$on似乎没有捕捉到正在发出的事件,可能有以下几个原因:

  1. 事件名称错误:请确保事件名称在EventBus.$on和EventBus.$emit中是一致的。如果名称不匹配,监听器将无法捕捉到事件。
  2. 事件未被正确触发:请检查是否正确地使用EventBus.$emit来触发事件。确保在正确的位置和时机触发事件,以便监听器能够捕捉到。
  3. EventBus未正确引入:请确保已正确引入EventBus。在Vue.js中,可以通过创建一个新的Vue实例作为EventBus来实现事件的监听和触发。例如,在main.js中可以添加以下代码:
  4. EventBus未正确引入:请确保已正确引入EventBus。在Vue.js中,可以通过创建一个新的Vue实例作为EventBus来实现事件的监听和触发。例如,在main.js中可以添加以下代码:
  5. 然后,在需要监听和触发事件的组件中,可以使用以下代码:
  6. 然后,在需要监听和触发事件的组件中,可以使用以下代码:
  7. 组件之间的层级关系问题:如果EventBus.$on在父组件中被调用,而事件是在子组件中被触发的,可能会导致监听器无法捕捉到事件。在这种情况下,可以考虑使用Vuex来管理组件之间的状态和通信。

总结起来,要确保EventBus.$on能够捕捉到正在发出的事件,需要注意事件名称的匹配、正确触发事件、正确引入EventBus以及组件之间的层级关系。如果以上步骤都正确无误,但问题仍然存在,可能需要进一步检查代码逻辑和调试。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 组件传值

    vue组件之间传值大致分为三种:父组件给子组件传值,子组件给父组件传值,兄弟组件之间传值 本文主要介绍vue组件之间简单数据传递,如果组件之间传递数据比较复杂,建议使用vue状态管理模式 vuex...子组件给父组件传值 1.子组件通过触发$emit事件给父组件传值 $emit 第一个参数为自定义事件,第二个参数为要传递给父组件值,父组件在子组件标签上绑定自定义事件来接收子组件传递数据 子组件...实例来作为全局事件总线,兄弟组件之间通过 eventBus. on和eventBus.on 和 eventBus. on和eventBus.emit 注册触发事件来传递数据 新建一个vue实例 eventBus.js...$emit触发自定义事件给子组件B传值 eventBus....$on注册自定义事件接收子组件A传值 eventBus.

    1.8K10

    可视化拖拽组件库一些技术要点原理分析(四)

    ,原来目录结构为: - VText.vue - Picture.vue ......这可以在发出请求时候把组件整个数据对象 obj 以及要修改属性 key 当成参数一起传进去,当数据返回来时,就可以直接使用 obj[key] = data 来修改数据了。...(目前只有点击、悬浮两个事件事件回调函数触发时会收到一个参数——发出事件组件 id(譬如多个组件都触发了点击事件,需要根据 id 来判断是否是自己监听组件) 最后再修改对应属性 事件触发 <template...或 v-hover 事件 监听了这两个事件 b 组件收到通知后再修改 b 组件相关属性(例如上面矩形 x 坐标和旋转角度) 组件按需加载 目前这个项目本身是没有做按需加载,但是我把实现方案用文字形式写出来其实也差不多...文件 ,例如叫 bundle.js

    1.3K30

    VUE中常用4种高级特性!

    1. provide/inject provide/inject 是 Vue.js 中用于跨组件传递数据一种高级技术,它可以将数据注入到一个组件中,然后让它所有子孙组件都可以访问到这个数据。...事件总线(EventBus) Vue事件总线是一个事件处理机制,它可以让组件之间进行通信,以便在应用程序中共享信息。在Vue.js应用程序中,事件总线通常是一个全局实例,可以用来发送和接收事件。...在需要发送事件组件中,使用$emit方法触发事件并传递数据: eventBus....$emit('eventName', data); 3.3 在需要接收事件组件中,使用$on方法监听事件并处理数据: eventBus....另外,需要在组件销毁前使用$off方法取消事件监听: eventBus.$off('eventName'); 这样就可以在Vue.js应用程序中使用事件总线来实现组件之间通信了。

    16810

    uniapp页面间通信相关方法总结

    uni-app 是一个使用 vue.js 开发所有前端应用框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台...Tips 如果页面没有打开,将不能 注册监听事件 uni.on 和 uni.once 。 一次性事件,直接使用 uni.$once 监听,不需要移除。...$eventBus.$emit(“getId”, 12) } // 在 B 页面注册监听事件 created() { this.$eventBus....Vue 之前是没有这类概念,但 uni-app 引入了globalData概念,并且在包括H5、App等平台都实现了。...Vuex Vuex 是一个专为 Vue.js 应用程序开发状态管理模式。它采用集中式存储管理应用所有组件状态,并以相应规则保证状态以一种可预测方式发生变化。

    4.3K20

    一步一步学习Vue(十)

    1、使用父组件进行封装,把所有操作都移到父组件中 2、搜索组件,触发事件到父组件,父组件监听到事件发生,则执行查询操作,传递props 到列表组件,这也是我们前面实现过方式,这里简单写一个demo。...那么如果没有父组件,能否实现上述功能呢,毕竟我们不可能每次兄弟组件通信都创建一个多余父组件过来,这样如果嵌套层数过多也是很大问题,对于兄弟组件通信问题,官方也提到了叫做event bus实现方式,...eventbus,有没有更好状态管理方案呢?...能否把状态管理独立出来呢,这就是我们接下来要说vuex。 Vuex 是一个专为 Vue.js应用程序开发状态管理模式。.../2.4.1/vue.js"> </head

    70140

    09Vue.js快速入门-Vue入门之Vuex实战

    但是复杂页面逻辑,组件之间数据共享处理就会需要通过事件总线方式解决或者使用VueVuex框架了。 9.3....子组件通知父组件数据更新:事件方式实现 子组件可以在子组件内触发事件,然后在父容器中添加子组件时绑定父容器方法为事件响应方法方式.如下图所示: ?...vue父子传递 使用 v-on 绑定自定义事件 每个 Vue 实例都实现了事件接口(Events interface),即: 使用 $on(eventName) 监听事件 使用 $emit(eventName...事件总线方式解决非父子组件数据同步 如果非父子组件怎么通过事件进行同步数据,或者同步消息呢?Vue事件触发和监听都是跟一个具体Vue实例挂钩。...所以在不同Vue实例中想进行事件统一跟踪和触发,那就需要一个公共Vue实例,这个实例就是公共事件对象。 ? image 参考下面做一个购物车案例代码: <!

    1.2K90

    Vue课堂】Vue.js 父子组件之间通信十种方式

    这篇文章介绍了Vue.js 父子组件之间通信十种方式,不管是初学者还是已经在用 Vue 开发者都会有所收获。...$emit('greet', 'vue.js') // => "Hi, vue.js" 3. .sync 修饰符 这个家伙在 vue@1.x 时候曾作为双向绑定功能存在,即子组件可以修改父组件中值。...不幸是,真正双向绑定会带来维护上问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显改动来源。...() { // 变量保存 EventBus.message = 'hello' // 事件监听 EventBus....通过访问父实例也能进行数据之间交互,但极小情况下会直接修改父组件中数据。 $root 当前组件树Vue 实例。如果当前实例没有父实例,此实例将会是其自己。

    75100
    领券