子作用域发送数据给父作用域 $on $emit

最新推荐文章于 2024-06-19 15:55:15 发布
最新推荐文章于 2024-06-19 15:55:15 发布
阅读量387 收藏
点赞数
分类专栏： angular js 文章标签： $on $emit
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39125684/article/details/79754099
版权

直接贴代码

<title>无标题文档</title>
<style>
	#father{
		width:500px;
		height:300px;
		border:2px solid #ccc;
		}
	#child{
		width:200px;
		height:200px;
		border:1px dashed #000;
		}	
</style>
</head>
<script src="angular-1.6.8/angular.js"></script>
<body ng-app="myApp" >

<div ng-controller="father" id="father">
父作用域
	<div ng-controller="child" id="child">
    子作用域
    	<input type="button" value="emit" ng-click="postEvent()"/>
    </div>
    
</div>

<script>

var app = angular.module("myApp",[]);

	app.controller("father",function($scope){
	
	$scope.$on("info",function(event,data){
		console.log("接收到子作用域中的数据");
		console.log(data);
		
		});
	});
	app.controller("child",function($scope){
		$scope.postEvent = function(){
		$scope.$emit("info","子作用域传递过去的数据");
		}
	});	
	
</script>

</body>

 展示一下截图



野蛮生长001
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2.0 中#$emit,$on的使用详解
12-29
vue1.0中 vm.$dispatch 和 vm.$broadcast 被弃用，改用$emit,$on vm.$on( event, callback ) 监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。 vm.$emit( event, […args] ) 触发当前实例上的事件。附加参数都会传给监听器回调。 例子： //父组件 <template> <ratingselect select-type=onSelectType></ratingselect> </template> [removed] data ()
angularjs $emit $broadcast $on 通讯
guyatao13的专栏
05-22 718
$emit只能向parent controller传递event与data$broadcast只能向child controller传递event与data$on用于接收event与data 例子如下 html代码 div ng-controller="ParentCtrl"> 父级--> div ng-controller="SelfCtrl"
$emit和$on 的使用
最新发布
weixin_48635632的博客
06-19 382
$emit和$on 的使用
子作用域和父作用域的事件传播
Efficiency9的博客
07-28 546
angular优秀特性之一–事件传播机制 $emit方法实现事件从子作用域路径到父作用域 <!DOCTYPE html> <html lang="en" ng-app="eventModule"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../../angular.min.js"></sc
vue中的$on与$emit
qq_42526440的博客
03-10 1169
们再项目中经常会遇到这么些情况，兄弟组件之间的传值。 比如说一个组件内的按钮触发了兄弟组件的<audio>标签，从而播放背景音乐。另一个组件触发了暂停，从而暂停背景音乐。 这个时候就会用到$on和$emit了。 使用 $on(eventName) 监听事件 使用 $emit(eventName) 触发事件 $emit 1、this.$emit（‘自定义事件名’,要传送的数据）； 2、触发当前实例上的事件，要传递的数据会传给监听器； $on 1、VM.$on('事件名',callback) ---
Vue事件总线（EventBus）、$on、$emit、$off
热门推荐
^_^
06-29 3万+
在之前我们只用过父传子，子传父进行传数据，这时候当组件嵌套比较深或比较复杂的情况，这时候就用到了事件总线 (EventBus) 如何理解事件总线呢，你可以理解为用来传输数据的一条线 一、使用EventBus 1. 创建事件总线 main.js // 创建事件总线 const bus = new Vue() // 把bus挂载到了Vue的原型上, 保证所有的组件都能通过 this.$bus访问到事件总线 Vue.prototype.$bus = bus 2.页面使用 发布事件 - 传...
AngularJS $on、$emit和$broadcast的使用
10-21
SelfCtrl可以使用$broadcast向子作用域发送消息，也可以使用$emit向父作用域发送消息。ParentCtrl和ChildCtrl通过注册事件监听器来接收这些事件。 在实际应用中，$on、$emit和$broadcast可以传递多个参数，这对于...
学习Angular中作用域需要注意的坑
09-01
而当使用引用类型时，即使在子作用域中修改对象属性，`$watch`也能正确识别，进而触发视图的更新。 4. **最佳实践**： - 避免在多个作用域中直接共享基本类型，尽量使用引用类型，尤其是当涉及到父子作用域间的...
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
10-22
1. `$on(name, handler)`：注册一个事件监听器，当指定的事件在当前作用域被触发时，`handler`函数会被调用。 2. `$emit(name, args)`：从当前作用域开始，向其父级作用域发送一个事件，直到根`$rootScope`。事件...
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
01-19
Angularjs中不同作用域之间可以...$on用于在作用域中监控从子级或父级作用域中传播的事件以及相应的数据。格式如下：$on(event,data) 上述说明中，eventName是需要监控的事件的名称，$on 方法中的参数event是事件的相
实现vue中的$on $emit
weixin_30256505的博客
03-10 129
var eventList = { 'sayName': [sayName] } var name = 'hehe' var age = 28 function sayName() { console.log(this.name) } ...
Vue.js 中的 $emit 和 $on 方法有什么区别？
Java徐师兄的博客
06-10 1837
emit 和on方法是Vuejs中用于实现组件间通信的两个重要方法。on 方法是 Vue.js 中用于实现组件间通信的两个重要方法。on方法是Vuejs中用于实现组件间通信的两个重要方法。emit 方法用于触发自定义事件并向父组件或祖先组件派发该事件，而on方法用于监听自定义事件并在事件触发时执行回调函数。on 方法用于监听自定义事件并在事件触发时执行回调函数。on方法用于监听自定义事件并在事件触发时执行回调函数。emit 方法必须在组件内部使用，而on。
angularJs 父子作用域之间的通信—$on、 $emit、$broadcast的介绍
lhj20084720208的博客
01-07 6320
angularJs 父子作用域之间的通信—$on、 $emit、$broadcast的介绍 angularJs中的作用域（$scope）结构和DOM结构非常相似，也是一个层次分明的树状结构。它有一个根作用域$rootscope（对应angular应用或ng-app），其他作用域是嵌套在根作用域下面的。 $on、$emit和$broadcast使得event、data在controller之间的传递变的简单。
vue中$on和$emit用法理解
curry_zhao的博客
12-13 1万+
很期待奇门遁甲这部电影，谁是老大？伍佰一开口就仿佛回到了挪威的森林、突然的自我时代，哈哈哈，且看我独孤九剑向天涯…… 回归正题，在vue中有这样的一个方法，$on，$emit，就在开发中，我用的比较多的是$emit，对，就是传递一个函数方法。用过的人都知道！！ 今天在走查项目代码的时候，看到旁边大神用到了一组方法，$on 、 $off、 然后接着$emit  理解不是特别透，随即请教了 ，这
Vue组件通信原理剖析（一）事件总线的基石 $on和$emit，web前端开发自学技巧有哪些
2401_84140140的博客
04-11 1000
解决问题：子给父传值// childthis.$emit(‘add’, ‘这是子组件传给父组件的参数’)// parent// parantAdd是定义在父组件中的事件，事件接受的参数$event就是子组件传给父组件的值。
AngularJS从子控制器访问父作用域
asdfgh0077的博客
06-01 430
I've set up my controllers using data-ng-controller="xyzController as vm" 我使用data-ng-controller="xy
vue2中父组件修改子组件data中的值
05-10
在 Vue 中，父组件不能直接修改子组件的数据。这是因为子组件的数据属于子组件的作用域，父组件无法直接访问。如果需要修改子组件的数据，需要通过 props 将数据传递给子组件，然后在子组件中通过事件触发将数据传递回父组件进行修改。 下面是一个示例代码： 父组件中： ```html <template> <div> <child-component :childData="childData" @changeData="handleChangeData"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, data() { return { childData: '子组件数据' } }, methods: { handleChangeData(data) { this.childData = data } } } </script> ``` 子组件中： ```html <template> <div> <p>{{ childData }}</p> <button @click="changeData">修改父组件数据</button> </div> </template> <script> export default { props: { childData: { type: String, required: true } }, methods: { changeData() { this.$emit('changeData', '父组件数据') } } } </script> ``` 在父组件中，我们通过 props 将 `childData` 数据传递给子组件，并通过事件 `changeData` 监听子组件的数据变化。在子组件中，我们通过 `$emit` 方法触发 `changeData` 事件，并将修改后的数据传递给父组件。在父组件的 `handleChangeData` 方法中，我们将子组件传递过来的数据赋值给 `childData`，从而实现了父组件修改子组件数据的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值