事件总线 this.$bus.$emit() this.$bus.$on

最新推荐文章于 2024-04-25 12:50:07 发布
最新推荐文章于 2024-04-25 12:50:07 发布
阅读量2.1k 收藏 1
点赞数 1
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43764828/article/details/108678597
版权

当 goodsItem 需要调scroll.vue的方法，

方案一：可以用vuex 共享一个状态，在goodsItem去改变vuex的状态。然后在根组件中去监听vuex状态变化。

方案二：事件总线

在goodsItem发送事件this.$bus.$emit(‘imgOnload’) 

在根组件中 监听 this.$bus.$on('imgOnload',()=>{ 这里在做具体的事情  })

另外需要在main.js中 Vue.prototype.$bus = new Vue()

张小萍Becky
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-geb-使用Observables的全局事件总线。-Vue.js开发
05-27
Vue-geb-全局事件总线Vue-geb是vue全局事件总线插件，可利用可观察对象的功能帮助在整个应用程序中广播事件。... $ geb.getBus（）// Observable：Subject类型Emit总线中的事件：this。$ geb.emit（{object}）收听E
.NET Emit 入门教程：第一部分：Emit 介绍：什么是 Emit
路过秋天 - 理想很美好，现实很残酷，坚持在路上，只因初心仍存
03-20 1043
在.NET开发中，Emit 是一种动态生成IL代码的技术，通过使用 System.Reflection.Emit 命名空间中的类，可以在运行时创建和修改程序集、类型和方法。这种技术为开发人员提供了一种强大的方式来在运行时动态生成和执行代码：Emit 技术通常用于解决需要在运行时动态生成代码的特定场景，例如在ORM（对象关系映射）框架中动态创建实体类，或者在AOP（面向切面编程）中动态创建代理类。
C++/QT emit的使用
wYANGwcc的博客
07-20 1383
emit是用来发射信号的，这个信号如果要作为action或者其他用途就需要用到connect，connect的作用是把信号与信号or信号和槽关联起来。
this.$emit和bus.$emit的区别
t1621353644的博客
02-20 514
允许在不同组件之间进行全局事件通信。根据具体的情况和需求选择适当的方式来触发和监听事件。是Vue组件内部使用的机制，而事件总线（
[转载]Emit学习之旅(1)：Emit概览
weixin_33690963的博客
11-30 238
  一、Emit概述 　　Emit,可以称为发出或者产生。在Framework中，与Emit相关的类基本都存在于System.Reflection.Emit命名空间下。可见Emit是作为反射的一个元素存在的。说道反射，大家应该都不陌生，它允许我们查看程序集的元素据，从而取得形如程序集包含哪些类型，类型包含哪些方法等等大量的信息。但是反射也仅能够‘看’，而Emit则可以在运行时动态生成代码。接下...
使用emit发射信号
zxf347085420的博客
07-03 1243
在Qt中，emit是一个关键字，用于在信号槽机制中发射信号。信号槽机制是Qt的一个重要特性，用于在对象之间进行通信。当一个对象的状态发生变化时，它可以发射一个信号，其他对象可以连接这个信号并在信号被发射时执行一些操作。此外，在发射信号时，信号的名称前需要加上emit关键字。其中，signalName是。需要注意的是，如果一个信号在。，parameters是。1、发射一个无参数信号。
Vue事件总线：this.$bus.$emit与this.$bus.$on
热门推荐
skysys的研究小屋
01-15 1万+
1.创建Vue实例 //main.js Vue.prototype.$bus = new Vue(); 2.发射事件 //GoodsList this.$bus.$emit("aaa") 3.监听事件 //home.vue this.$bus.$on("aaa",()=>{ this.$refs.scroll.scroll.refresh() }) 4.示例：监听图片加载 //GoodsListItem.vue <template> <img :src="showImag
vue组件通信-EventBus
weixin_49405038的博客
04-20 240
vue组件通信-EventBus常用于跨组件通信时使用 两个组件的关系非常的复杂，通过父子组件通讯是非常麻烦的。这时候可以使用通用的组件通讯方案：事件总线（event-bus) // 1. 创建事件总线 main.js const bus = new Vue() // 把bus挂载到了Vue的原型上, 保证所有的组件都能通过 this.$bus访问到事件总线 Vue.prototype.$bus = bus // 2. 订阅事件 - 接收值 this.$bus.$on('事件名', 事件回调函数) t
vue 组件传值（二）$bus，$emit，$on
qq_40891322的博客
12-02 992
vue 组件传值（二）$bus，$emit，$on <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="../node_modules
Vue项目组件间通信总结
Allurewuhui的博客
01-30 339
一；通过给组件绑定自定义事件实现 子向父传递参数 1.首先在父组件当中 给子组件绑定自定义事件 2.在子组件中，通过 this.$emit ( '自定义事件名' ， 要传递的数据) 进行子组件中数据的传递 3.在父组件中的methods中书写自定义事件函数，函数中的形参用来接收子组件传递过来的数据，在函数体中进行数据的处理 // 这是父组件中的子组件标签 <SearchSelector @trademarkInfo="trademarkInfo" @attrInfo="attrInfo"/&
bus总线.html
03-01
简单的总结vue中的几种通信方法,如父传子:props,子传父:this.$emit(),bus.$on监听事件,接受信息,bus.$emit()触发事件,发送信息,及refs使用的隐患
vue.js单文件组件中非父子组件的传值实例
01-19
在简单的场景下，可以使用一个空的 Vue 实例作为中央事件总线： var bus = new Vue()； // 触发组件 A 中的事件 bus.$emit('id-selected', 1) // 在组件 B 创建的钩子中监听事件 bus.$on('id-selected', function ...
EventBus:事件总线
05-08
事件总线 安装 对于节点 npm install ovaldi-event-bus 凉亭 bower install event-bus 对于Require.js ... bus.on("ready", function(data1, data2){ console.log(data1, data2); }); bus.emit("ready
minibus:JavaScript 的最小事件总线
07-04
> var route = bus.on('out-of-fuel', function () { console.log('Hitchhike.') }); > bus.emit('out-of-fuel') Hitchhike. > bus.off(route) > bus.emit('out-of-fuel') (nothing) 特征 轻量级，压缩后大约 600 ...
vue 实现级联选择器功能
清音的博客
04-22 505
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
19篇 vue3进阶
hummhumm的专栏
04-20 413
10. **组件定义的分离**：通过 `defineComponent` 方法分离组件逻辑与模板。23. **事件总线 (`provide` / `inject`)**：祖先与后代组件间通信。33. **跨平台支持**：如 `Nativescript-Vue` 或 `Uni-app`。9. **动态组件和 `v-if` / `v-for`**：更灵活地使用这些指令。20. **计算属性 (`computed`)**：创建缓存的计算属性。12. **组件的 `expose` 选项**：显式指定组件公开属性。
vue-manage-system 更新，后台管理系统开发更简单
林鑫
04-22 399
近期进行了一次版本升级，主要是支持了更多功能、升级依赖版本和优化样式，并且上线了网站，大部分功能都有文档或者使用示例，更加适合新手上手开发，只需要根据实际业务简单修改，就可以完成产品需求。
vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记
最新发布
xu_duo_i的博客
04-25 246
vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记
this.$bus.$emit+
07-29
this.$bus.$on('myEvent', (message) => { console.log(message); // 输出：Hello, world! }); ``` 这样，组件 A 触发了名为 `myEvent` 的事件，并传递了一个字符串数据 `'Hello, world!'`。组件 B 监听到 `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值