22.《父组件向子组件传送方法($emit)》

最新推荐文章于 2023-06-20 14:02:35 发布

@逆风微笑代码狗

最新推荐文章于 2023-06-20 14:02:35 发布

阅读量877

点赞数

分类专栏：笔记文章标签： vue js javascript

本文链接：https://blog.csdn.net/qq_44864082/article/details/106644535

版权

笔记专栏收录该内容

45 篇文章 1 订阅

订阅专栏

大家好，我是@执念！！！

在上一篇博客中，通过props属性来在子父组件之间传送数据，现在我们通过$emit在子父组件传递方法

vue中对$emit的定义见：

vm.$emit( eventName, […args] )

参数：
- {string} eventName
- [...args]
触发当前实例上的事件。附加参数都会传给监听器回调。

用途与示例

1.父组件可以使用 props 把数据传给子组件。

1.子组件可以使用 $emit 触发父组件的自定义事件。

具体案例如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>父组件向子组件传送方法($emit)</title>
	</head>
	<script type="text/javascript" src="js/vue.js" ></script>
	<body>
		<div id="app">
            <!--用v-on绑定自己的事件类型，叫做自定义事件类型  自定义事件类型-->
		   <calc @func='show'></calc>
		</div>
		<template id='temp'>
			<div>
				<p>这是子组件----{{test()}}</p>
			</div>
		</template>
		<script>
			//模板对象
			var temp={
				template:'#temp',
				data:function(){
					return {
						param1:'参数一',
						param2:'参数二'
					}
				},
				methods:{
					test:function(){
//						console.log(this.$emit);
						//$emit（要触发的事件类型）
						//从第二个参数开始，传入处理当前函数所需要的事件参数
						this.$emit('func',this.param1,this.param2);
					}
				}
			}
			//把模板注册成组件
			Vue.component('calc',temp);
			var vr=new Vue({
				el:'#app',
				data:{
					msg:'父组件数据'
				},
				methods:{
					show:function(param1,param2){
						console.log("调用父组件方法:接收到参数");
						console.log(param1,param2)
					}
				}
			})
		</script>
	</body>
</html>

代码运行流程截图

谢谢访问！！！

@逆风微笑代码狗

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
22.《父组件向子组件传送方法($emit)》

大家好，我是@执念！！！在上一篇博客中，通过props属性来在子父组件之间传送数据，现在我们通过$emit在子父组件传递方法vue中对$emit的定义见：vm.$emit( eventName, […args] ) 参数： {string} eventName [...args] 触发当前实例上的事件。附加参数都会传给监听器回调。用途与示例1.父组件可以使用 props 把数据传给子组件。1.子组件可以使用 $emit 触发父组件的自定义事件。具体案例如下.
复制链接

扫一扫