$emit和$broadcast使得event、data在controller与view之间的传递变的简单。
- $emit只能向parent controller传递event与data
- $broadcast只能向child controller传递event与data
实例代码:
AngularEvent.html
<!DOCTYPE html> <html> <head> <script src="lib/jquery-1.9.1.js"></script> <script src="lib/angular.js"></script> <script type="text/javascript" src="js/emit-broadcast.js"></script> <style> .ng-scope { border: 1px dotted red; } </style> </head> <body> <div ng-app="" class="container"> <div ng-controller="EventController" class="span12"> Root scope MyEvent count: {{count}} <ul> <li ng-repeat="i in [1]" ng-controller="AbcController"> <button ng-click="$emit('MyEvent')">$emit('MyEvent')</button> <button ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button> <button ng-click="fireEvent()">fireEvent()</button> <br> Middle scope MyEvent count: {{count}} <ul> <li ng-repeat="item in [1, 2]" ng-controller="EventController"> - Leaf scope MyEvent count: {{count}} </li> </ul> </li> </ul> </div> </div> </body> </html>
emit-broadcast.js
function EventController($scope) { $scope.count = 0; $scope.$on('MyEvent', function() { $scope.count++; }); } function AbcController($scope) { $scope.fireEvent = function() { $scope.$emit('MyEvent'); $scope.$broadcast('MyEvent'); }; }
运行效果:
刚打开页面
点击“$emit('MyEvent')”按钮,发现Root和Middle scope下的count变化了,每点击一次加1。
点击“$broadcast('MyEvent')”按钮,发现Leaf scope下的count变化了,每点击一次加1。
点击“fireEvent()”按钮,发现整个scope下的count变化了,每点击一次加1(因为在fireEvent方法中有$emit、$broadcast事件MyEvent)。
相关推荐
本文主要介绍AngularJS $on、$emit和$broadcast的使用,这里整理了详细的资料及简单示例代码有兴趣的小伙伴可以参考下
$emit触发事件拿不到传递的参数 https://blog.csdn.net/qq_36413371/article/details/102795742
注意:$emit和$on的事件必须在一个公共的实例上,才能够触发。 例子:我要实现某个系统的通讯录功能,在web端我们可以使用基于jQuery的ztree插件实现目录的展现,但是在vuejs框架里面,tree目录需要通过递归组件实现...
$emit传入的事件名称只能使用小写,不能使用大写的驼峰规则命名 如果修改后还是不行的话,就改用: this.$parent.Event (Event为父组件中的自定义方法) 补充知识:Vue.js 使用 $emit 触发事件填坑 vue的组件内触发...
组件之间事件触发 之前使用组件,并不是很频繁,是水平...父子组件之间事件触发可以使用$emit $emit的使用方法如下: 在子组件中,写一个click点击事件。比如: cancelCU() { this.dialogVisible = false; this.$emi
$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 与 $on 来进行组件之间的数据传输。重点给大家介绍vue中的$emit 与$on父子组件与兄弟组件的之间通信方式,感兴趣的朋友一起看看
Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信 介绍: $broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己。格式如下:$broadcast(eventName,args) $emit的...
vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用,改用$emit,$on vm.$on( event, callback ) 监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。 vm.$emit( ...
面试官-Vue.js 中的 $emit 和 $on 方法有什么区别?.pdf
下面小编就为大家分享一篇vue使用$emit时,父组件无法监听到子组件的事件实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
本篇文章主要介绍了Angular中$broadcast和$emit的使用方法详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
1、$emit 子组件调用父组件的方法并传递数据 注意:子组件标签中的时间也不区分大小写要用“-”隔开 子组件: <button @click="emitEvent">点击我</button> [removed] export default { data() { ...
主要介绍了vue中$refs, $emit, $on, $once, $off的使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Vue中的父子通信使用$emit和$on是如何实现的简易代码$on (trigger, callback) {if (typeof callback === '
主要介绍了详解vue中this.$emit()的返回值是什么,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
这篇文章将会通过props、$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信。 在说如何实现通信之前,我们先来建两个组件father.vue和child.vue作为示例的基础。 //父组件 我是父组件! <child></...
2.解决实例 问题分析 1.之前写的自定义组件事件触发为this.$emit(“myclick”,this.todo.text);,这样this指的是todo-item的每一项,而最后vm.$on监听的是app组件,也就出说监听的是父节点,而触发的是子节点,故...