$on、$emit和$broadcast的使用

最新推荐文章于 2025-07-08 16:40:57 发布
最新推荐文章于 2025-07-08 16:40:57 发布
阅读量430 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： javascript angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qjhsmd2015/article/details/70172491
本文详细介绍了Vue.js中$emit、$broadcast、$on等事件通信机制的工作原理及使用方法，包括如何通过这些方法在父子组件间传递数据，并解释了事件对象的属性和方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  • http://www.tuicool.com/articles/qIBNve 参考文章
  • $emit只能向parent controller传递event与data
  • $broadcast只能向child controller传递event与data
  • $on用于接收event与data
  • $emit和$broadcast可以传多个参数，$on也可以接收多个参数。

  • 在$on的方法中的event事件参数，其对象的属性和方法如下

    事件属性 目的
    event.targetScope 发出或者传播原始事件的作用域
    event.currentScope 目前正在处理的事件的作用域
    event.name 事件名称
    event.stopPropagation() 一个防止事件进一步传播(冒泡/捕获)的函数(这只适用于使用`$emit`发出的事件)
    event.preventDefault() 这个方法实际上不会做什么事，但是会设置`defaultPrevented`为true。直到事件监听器的实现者采取行动之前它才会检查`defaultPrevented`的值。
    event.defaultPrevented 如果调用了`preventDefault`则为true

$emit和$on 的使用
hellow_d的博客
06-22 6019
一、$emit 1、this $emit（'自定义事件名',要传送的数据）； 2、触发当前实例上的事件，要传递的数据会传给监听器； 二、$on 1、VM.$on('事件名',callback) --------------------callback回调$emit要传送的数据； 2、监听当前实例上自定义时间； 三、接下来我们通过一个实例来解释 1、想要实现的 点击上一页、下一页，分别展现那页的内容。 数据刷新 废话不多说，上代码 以下是子组件 父组件代码 ...
使用$ scope。$ emit和$ scope。$ on
w36680130的博客
04-07 1303
How can I send my $scope object from one controller to another using .$emit and .$on methods? 如何使用.
angularjs $emit $broadcast $on 通讯
guyatao13的专栏
05-22 772
$emit只能向parent controller传递event与data$broadcast只能向child controller传递event与data$on用于接收event与data 例子如下 html代码 div ng-controller="ParentCtrl"> 父级--> div ng-controller="SelfCtrl"
Vue组件通信：$emit、$on、$once详解
最新发布
qq_40322763的博客
07-08 431
摘要：Vue的事件系统提供$emit、$on和$once三种方法实现组件通信。$emit用于触发当前实例事件并传递参数，$on持续监听事件需手动移除，$once只监听一次自动移除。适用场景包括：父子组件通信（$emit）、持续监听（$on）和一次性事件（$once）。最佳实践建议：事件命名规范化、及时移除监听器、复杂状态管理使用Vuex/Pinia。过度使用事件总线会导致代码难以维护，应合理选择通信方式。（149字）
AngularJS $on、$emit和$broadcast简单功能实例
qq_21205435的专栏
03-16 1754
我们知道，AngularJS的作用域是类似于JavaScript的原型继承的原理，作用于之间有一定的层次关系。AngularJS的每个作用域都有一个$rootScope的根作用域，其他的作用域 继承于这个作用域。但是很多作用域之间没有继承关系。在这种情况下，我们无法进行作用域之间的通信。解决这个问题      方法之一：在应用程序作用域中创建一个单例服务，用来解决所有子作用域之间的通信。
Vue.js 中的 $emit 和 $on 方法有什么区别？
徐师兄的博客
06-07 2892
emit 和on方法是Vuejs中用于实现组件间通信的两个重要方法。on 方法是 Vue.js 中用于实现组件间通信的两个重要方法。on方法是Vuejs中用于实现组件间通信的两个重要方法。emit 方法用于触发自定义事件并向父组件或祖先组件派发该事件，而on方法用于监听自定义事件并在事件触发时执行回调函数。on 方法用于监听自定义事件并在事件触发时执行回调函数。on方法用于监听自定义事件并在事件触发时执行回调函数。emit 方法必须在组件内部使用，而on。
AngularJS开发学习笔记:父子作用域之间的通信—$on、 $emit、$broadcast的介绍
JustWantToFly的博客
11-02 390
angularJs中的作用域（$scope）结构和DOM结构非常相似，也是一个层次分明的树状结构。它有一个根作用域$rootscope（对应angular应用或ng-app），其他作用域是嵌套在根作用域下面的。 angularJs的$scope之间都遵循js中对象原型继承方式，当子作用域中没有该对象时，默认向上级作用域（父作用域）寻找，直到找到或者到达$rootscope为止，当子作用域有该...
AngularJS $on、$emit和$broadcast的使用
10-21
2. 使用$on、$emit和$broadcast方法：AngularJS通过事件系统提供了一种在作用域之间通信的方式，这种方法不需要手动管理服务。 - $emit方法用于从当前作用域向上冒泡事件到父作用域。当你在子作用域中调用$scope.$...
Angular中$broadcast和$emit的使用方法详解
08-30
Angular中$broadcast和$emit的使用方法详解 Angular是一个流行的前端框架，它提供了许多强大的功能来帮助开发者快速构建应用程序。在Angular中，有两个重要的方法：$broadcast和$emit，它们都是用于在控制器之间...
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
10-22
合理使用$broadcast、$emit和$on方法，可以有效地管理复杂的页面逻辑和事件处理。这对于构建动态的、交互性强的web应用来说是十分重要的。在实际开发过程中，开发者应根据具体的应用场景，选择合适的事件广播方式，...
Vue $dispatch 和 $broadcast 详解
weixin_34411563的博客
03-06 2347
00 前言 $dispatch 和 $broadcast 作为一对情侣
Vue.js 进阶技巧Day02 $on 与 $emit （局部通信、父组件通知所有子组件、全局监听和通讯）
坚持硬核
10-20 1029
目录 0x00 局部通信： 0x01 如果父组件下有多个子组件，且数量未知，如何方便通知所有子组件呢? 0x03 全局的监听和通讯： 0x00 局部通信： 只能在当前组件下使用 <template> <div class='container p-5'> <button class='btn btn-success' @click='test'> 点击通讯 </button> <demo-item></dem
angularjs - on、on、emit和$broadcast的使用与区别
IT枫斗者的博客
04-21 507
onon。
Vue.js组件精讲 第4章 组件的通信2：派发与广播——自行实现dispatch和broadcast方法
此博客内容主要是小可日常工作中的一些问题解决的记录整理而成
04-09 1495
Vue.js 的组件通信到此还没完全结束，如果你想“趁热打铁”一口气看完，可以先阅读第 6 节组件的通信 3。亦或按顺序看下一节的实战，来进一步加深理解 provide / inject 和 dispatch / broadcast 这两对通信方法的使用场景。注：本节部分代码参考 iView。
angular脏检查机制，及指令中修改$scope致父级作用域无法接收到问题
爱分享的程序员
07-01 672
angular的指令很像我们所说的组件，不过比较好玩的是，angular里面存在作用域继承。不过这篇文章不讲这个问题，关于angular作用域继承，可以阅读这篇文章。本文要讲的是另外一个话题，即指令中修改$scope的某个属性时，父级作用域没有接收到这个修改。 问题还原 在开发中，我使用了如下的一套方法： // controllerA module.exports = ['scope′,function(scope', function(scope′,function(scope) { $scope.mem
vue中$on和$emit用法理解
热门推荐
curry_zhao的博客
12-13 1万+
很期待奇门遁甲这部电影，谁是老大？伍佰一开口就仿佛回到了挪威的森林、突然的自我时代，哈哈哈，且看我独孤九剑向天涯…… 回归正题，在vue中有这样的一个方法，$on，$emit，就在开发中，我用的比较多的是$emit，对，就是传递一个函数方法。用过的人都知道！！ 今天在走查项目代码的时候，看到旁边大神用到了一组方法，$on 、 $off、 然后接着$emit  理解不是特别透，随即请教了 ，这
angularjs $broadcast 和 $on 的使用及其注意事项
Four的博客
08-04 1万+
在同一页面时候，一般会有不同的ctr控制不同的模块，那么要在不同的ctr之间传递事件就需要用到 broadcast和broadcast 和on来传播和接收事件 下面是demo：<div ng-controller="ParentCtrl"> www.111cn.net //父级 <div ng-controller="SelfCtrl">
$dispatch和$broadcast在Vue中的深入解析与应用
尽管$dispatch和$broadcast在某些特定场景下仍然有用，如在一些老旧项目或特定UI框架中，但在现代的Vue开发中，推荐使用Vuex的actions和mutations来进行更高效、可预测的状态管理，或者使用自定义事件系统（$emit和$...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值