bus.$emit和bus.$on的用法

最新推荐文章于 2024-05-09 11:25:01 发布
置顶 最新推荐文章于 2024-05-09 11:25:01 发布
阅读量7k 收藏 10
点赞数
分类专栏： 初级前端 文章标签： vue.js es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44281416/article/details/109352931
版权

bus用来传递非父子关系的数据
如两个子组件之间传递数据
子组件1

this.$bus.$emit("change",param)

子组件2

this.$bus.$on("change",function(param){
})

补充：子组件中也可以写成这样的箭头函数

this.$bus.$on("change",para=>{
})
小学生也要加班
关注
  • 0
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue bus.$emit触发第一次$on监听不到问题
11-20
$emit与emit与emit与 $on的用法 新建bus.js import Vue from ‘vue’ export const bus = new Vue() 引用bus.js import {bus} from './bus' bus.$on('test', function (msg) { console.log(msg) }) bus.$emit('...
Vue $emit()不能触发父组件方法的原因及解决
12-28
$emit传入的事件名称只能使用小写，不能使用大写的驼峰规则命名 如果修改后还是不行的话，就改用： this.$parent.Event (Event为父组件中的自定义方法) 补充知识：Vue.js 使用 $emit 触发事件填坑 vue的组件内触发...
简单描述vue事件总线$bus及$on重复触发问题
胖胖的博客
03-19 4645
使用情景 非父子组件之间通信时，一层一层传太麻烦，Vuex又有点小题大做，这时就会用到。 开始 在main.js中创建$bus，这样就能全局使用。 Vue.prototype.$bus = new Vue() 在组件中（下面就称作组件1）通过$emit分发事件 this.$bus.$emit('imgLoad') 在另一组件中，（下面就称作组件2）通过$on来监听该组件分发出来的事件。 thi...
vue中$bus.$emit、$on的用法
活宝小娜的博客
07-13 1565
vue中$bus.$emit、$on的用法。
关于vue中使用事件车(Bus)方式实现兄弟组件通信时$on无法获取数据的问题_同一页面下的bus通信为什么数据不显示
最新发布
2401_84447362的博客
05-09 426
小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Vue中事件总线$bus的用法及$on、$off和$emit的使用
初辰的博客
01-19 1778
【代码】Vue中事件总线$bus的用法及$on、$off和$emit的使用。
Vue中使用bus.$emit触发自定义事件bus.$on却监听不到任何消息
weixin_43239880的博客
02-11 8877
Vue中使用bus.emit触发自定义事件bus.emit触发自定义事件bus.emit触发自定义事件bus.on却监听不到任何消息 Bug情况，我这边有两个模块（区域防控和边界防控），分别使用了同一个地图文件，在地图文件中，只要点击了地图，就会使用bus.emit来发出一个事件，然后每个模块分别使用bus.emit来发出一个事件，然后每个模块分别使用bus.emit来发出一个事件，然后每个模块分别使用bus.on接收到该事件，就可以对地图的点击做出反应（也就是弹窗）。 如图： 点击后： 本来单个模块使
$bus的使用
qq_42816270的博客
01-10 1674
事件总线：$bus的使用，$bus.on 监听，$bus.off关闭监听，$emit 发送事件，$bus 封装
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
01-21
组件之间事件触发 之前使用组件，并不是很频繁，是水平的问题，目前工作中，公司大佬带着我...$emit的使用方法如下： 在子组件中，写一个click点击事件。比如： cancelCU() { this.dialogVisible = false; this.$emi
vue中$refs, $emit, $on, $once, $off的使用详解
10-16
在Vue.js框架中，$refs, $emit, $on, $once, 和 $off 是用于组件间通信的重要机制。下面将分别对它们进行详细的解释和示例说明。 1. **$refs** `$refs` 是 Vue 提供的一种机制，允许父组件引用其子组件实例。在...
（七）全局事件总线：实现任意组件通信
在这个地方会介绍一些前端和后端的开发内容，暂时以JavaEE和Vue为主。
04-17 472
Vue,Vue2,组件通信，前端，前端框架
兄弟组件间通信：事件总线的使用bus、bus、emit、$on
吴川华仔的博客
11-11 1738
兄弟组件间通信：事件总线的使用bus、bus、bus、emit、$on 文章目录兄弟组件间通信：事件总线的使用bus、bus、bus、emit、$on一、介绍二、使用 一、介绍 ​ 一个vue.js肯定是由多个组件组成的，而组件实例的作用域是相互独立的，即不同组件之间的数据无法简单的相互引用。 ​ 但是避免不了有时需要相互引用，比如一个父组件包含多个子组件，当父组件更改后需要同时更新各个子组件的数据。 ​ 一般组件间有几种关系，像A.vue与B.vue是父子关系，A.vue与C.vue是隔代关系，C
vue组件间切换 this.$bus.$on会多次调用问题
weixin_44545815的博客
11-21 2959
this.$bus.$on 向容器添加了一个事件监听，当页面跳转时，原来的组件没有注销。事件监听不会被移除，再次进入该组件后 又会向bus容器添加重复的事件监听器
Vue事件总线（EventBus）、$on、$emit、$off
热门推荐
^_^
06-29 2万+
在之前我们只用过父传子，子传父进行传数据，这时候当组件嵌套比较深或比较复杂的情况，这时候就用到了事件总线 (EventBus) 如何理解事件总线呢，你可以理解为用来传输数据的一条线 一、使用EventBus 1. 创建事件总线 main.js // 创建事件总线 const bus = new Vue() // 把bus挂载到了Vue的原型上, 保证所有的组件都能通过 this.$bus访问到事件总线 Vue.prototype.$bus = bus 2.页面使用 发布事件 - 传...
兄弟组件传数据:全局事件总线this.$bus.$emit/$on组件跳转过程多次发请求并且页面无法渲染的问题
qq_47530527的博客
03-30 2541
实现业务描述：有A和B两个组件要进行传一个哈希值，A组件获取哈希值后，需要跳转到兄弟组件B组件并且将哈希值传到B组件，具体代码如下图所示： A组件的逻辑 B组件的逻辑 问题描述：A组件中getContent事件只被emit触发了一次，但是B组件this.$Bus.$on中的回调函数却被执行了多次的现象。并且伴随着A组件与B组件跳转过程中回调函数被执行次数会依次增加。 产生原因：this.$Bus.$on实际是向Bus容器中添加一个事件监听器，当页面跳转时，原来的vue组件即A组件被注销，但.
VUE2 VUE3 父子、隔代、兄弟组件的传值方式
alokka的博客
02-12 2万+
时隔一年多 vue 又增加了新的方法 2.2.0 新增 provide 和 inject （隔代传值） 2.4.0 新增 \$attrs 和 \$listeners （隔代传值）
vue中$emit与$on和BUS
jerryyang_2017的博客
05-21 1148
bus: /vue原型链挂载总线 Vue.prototype.bus = new Vue(); //子组件发送数据 this.bus.$emit("change",data); //子组件接收数据 this.bus.$on("change",function(data){ }) vue中$emit与$on var Event = new Vue();　　　　　　相当于又new了一个vue实例，Event中含有vue的全部方法； Event.$emit('msg',th
Vue2.5学习笔记（二）深入了解组件
Zijeak的博客
09-08 3929
1.组件使用的细节 1.2 子标签内使用组件 假设想在表格便签内使用一个组件作为行，直接使用组件是不行的，原因在于tbody内只能放tr便签，否则浏览器就会将tbody内的标签解析到外面，从而导致结构的错乱。 为了解决这个问题，我们可以使用is特性，将is特性设置为组件名称，这样既保证了tbody和tr之间的层级关系，也使用了组件。 1.2 非根组件的data必须是一个函数 一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 1.3 在Vue中操作DOM：使用ref
this.bus.$emit
04-10
this.bus.$emit是Vue.js中的一种事件触发机制。在Vue.js中，可以使用事件总线（Event Bus）来实现组件之间的通信。this.bus.$emit用于在当前组件中触发一个自定义事件，并传递数据给其他组件。 具体来说，this.bus是一个Vue实例，通过$emit方法可以触发一个自定义事件。$emit方法接受两个参数，第一个参数是事件名称，第二个参数是要传递的数据。当调用this.bus.$emit时，Vue会在整个应用程序中寻找相应的监听器，并执行相应的回调函数。 其他组件可以通过this.bus.$on来监听这个自定义事件，并在事件触发时执行相应的逻辑。通过这种方式，不同组件之间可以进行解耦的通信，实现了组件之间的数据传递和交互。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值