AngularJS中的作用域具有继承性,并且结构是嵌套的。也就是说,对于每个Angular应用或者ng-app来说,只有一个主作用域$rootScope,其他所有作用域都会继承这个主作用域,或者嵌套在这个主作用域内部。通常情况下,你会发现作用域之间不会共享变量,并且互相之间不会基于原型继承。
如果需要在两个作用域之间进行通信,应该怎么做呢?其中一种方法是:创建一个服务,这个服务在整个应用范围内是一个单例,并且所有作用域之间的交互都通过它进行。另一种方法是:通过作用域上的事件进行交互。但是,这样做存在一些局限性。例如,你通常不能向正在监听的所有作用域同时广播事件。你必须选择是和父节点交互还是和子节点交互。
下面是一个如何监听事件的例子,在例子中,Start System(星系)中的作用域对象正在等待并监听planetDestroyed事件。
scope.$on('planetDestoryed', function(event, galaxy, planet) { //自定义事件,这样星球就被摧毁了 scope.alertnearbyPlanets(galaxy, planet); });
事件监听器上的这些额外参数是从哪来的呢?我们来看一看,单个的星球是如何和它所属的Star System进行交互的:
scope.$emit('planetDestroyed', scope.myGalaxy, scope.myPlanet);
传递给$emit的附加参数将会被当作函数参数传递给监听器函数。同时,$emit只会从当前的作用域向上进行通信,所以星球上可怜的居民(如果他们自已带有作用域对象的话)不会意识到他们的星球正在被摧毁。
类似地,如果Galaxy(银河系)需要向下和它的子节点进行交互,那么在Star System作用域中,它应该像下面这样进行交互:
scope.$emit('selfDestructSystem', targetSystem);
然后正在监听此事件的整个Star Systems都需要检查targetSystem,并且决定它们自已是否需要根据所接收的指令进行自我毁灭操作:
scope.$on('selfDestructSystem', function(event, targetSystem) { if(scope.mySystem == targetSystem) { scope.selfDestruct(); //引爆!! } });
当然,在事件向上(或者向下)传播的路径上,有一种操作可能是非常必要的,那就是在特定的层级或者作用域上说:“够了,不允许你通过这里!”,或者其他可以阻止事件的默认行为。传递给监听器的事件对象上带有一些函数,它们可以实现以上需求,甚至可以支持更多操作。如下所示:
相关推荐
本文主要介绍AngularJS $on、$emit和$broadcast的使用,这里整理了详细的资料及简单示例代码有兴趣的小伙伴可以参考下
Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信 介绍: $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己。格式如下:$broadcast(eventName,args) $emit的...
$emit和$on可以实现组件之间的传值,我们知道父组件传值给子组件使用props,但是不允许子组件传值给父组件,这时候使用这个就可以实现了。 注意:$emit和$on的事件必须在一个公共的实例上,才能够触发。 例子:我要...
主要介绍了vue中$refs, $emit, $on, $once, $off的使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
要在控制器之间传递变量变化需要使用angular中的$broadcast和$emit方法来传递,同时使用$on来接收事件并作出响应。 broadcast译为广播,即上级传递下级。 示例代码: [removed][removed] [removed] angular....
$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('...
组件之间事件触发 之前使用组件,并不是很频繁,是水平...父子组件之间事件触发可以使用$emit $emit的使用方法如下: 在子组件中,写一个click点击事件。比如: cancelCU() { this.dialogVisible = false; this.$emi
本文主要对vue 用$emit 与 $on 来进行组件之间的数据传输。重点给大家介绍vue中的$emit 与$on父子组件与兄弟组件的之间通信方式,感兴趣的朋友一起看看
Vue中的父子通信使用$emit和$on是如何实现的简易代码$on (trigger, callback) {if (typeof callback === '
今天小编就为大家分享一篇解决Vue.js父组件$on无法监听子组件$emit触发事件的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on vm.$on( event, callback ) 监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。 vm.$emit( ...
面试官-Vue.js 中的 $emit 和 $on 方法有什么区别?.pdf
组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。那么组件间如何通信,也就成为了vue中重点知识了。这篇文章将会通过props、$ref和 $emit 这几个知识...
$emit触发事件拿不到传递的参数 https://blog.csdn.net/qq_36413371/article/details/102795742