vue 子组件向父组件传递数据（自定义事件）

最新推荐文章于 2023-04-19 15:51:34 发布

不吃西红柿、

最新推荐文章于 2023-04-19 15:51:34 发布

阅读量1.4k

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45307792/article/details/121738051

版权

vue使用props可以让父组件向子组件传递数据，那怎么让子组件向父组件传递数据呢？这里就要用到（自定义事件）。

我们在子组件中使用$emit向父组件发射一个自定义事件和数据，通过这个自定义事件我们可以通过父组件的方法获取发送过来的数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app" >
			<con @itemclick="trans"></con>
		</div>
		<template id="con">
			<div>
				<button v-for="item in cate" @click="mth(item)">{{item.name}}</button>
			</div>
		</template>
		<script type="text/javascript">
	  //子组件
		const con ={
			template:'#con',
			data(){
				return {
					cate:[
						{name:'电脑'},
						{name:'手机'},
						{name:'笔记本'},
						{name:'家电'}
					]
				}
			},
			methods:{
				mth(item){       //这个方法用于发射自定义的事件和子组件的数据
					
					this.$emit('itemclick',item)
				}
			}
		}
		//父组件
			const app = new Vue({
				el : '#app',
				 components:{
					 con
				 },
				 methods:{
					 trans(item){            //这个方法用于接收子组件发送的数据
						 console.log(item.name);
					 }
				 }
			})
		</script>
	</body>
</html>

先完成子组件的构建

先要在子组件中添加一个事件（下面代码中是添加在button中），这里以点击事件click为例，然后向click调用的函数（可以在子组件中预先准备好）中传入要发送到父组件的数据，我这里就以item为例，还可以发送子组件中的其他数据，比如我代码里定义的cate数组。


<template id="con">
			<div>
				<button v-for="item in cate" @click="mth(item)">{{item.name}}</button>
			</div>
</template>//这段是写在script外的





const con ={  //这段是写在script内的
			template:'#con',
			data(){
				return {
					cate:[
						{name:'电脑'},
						{name:'手机'},
						{name:'笔记本'},
						{name:'家电'}
					]
				}
			},
			methods:{
				mth(item){       //这个方法用于发射自定义的事件和子组件的数据
					
					this.$emit('itemclick',item)
				}
			}
		}

接着就是定义子组件中那个要被调用的方法，里面代码很简单就是 this.$emit('itemclick',item)

其中的itemclick就是我们自定义的事件，item就是传入的数据，可以随意更改二者的名字，这段代码的意思就是向父组件发射我们的自定义事件和数据。

现在看怎么让父组件接收子组件发送来的数据（记得在父组件中完成子组件的注册）

          <div id="app" >   //写在script外
			<con @itemclick="trans"></con>
            </div>


//父组件
			const app = new Vue({      //写在script内
				el : '#app',
				 components:{
					 con
				 },
				 methods:{
					 trans(item){            //这个方法用于接收子组件发送的数据
						 console.log(item);
					 }
				 }
			})

先在我们注册的子组件上面添加我们之前自定义的事件itemclick，然后调用父组件中接收子组件数据的方法，我这里以trans为例，调用方法时不需要添加传递参数，系统会自动调用事件的event，但因为这里的事件是我们自定义的，系统就会默认传递$emit发送的数据给被调函数函数。

再看父组件中的方法定义，trans需要设置一个参数来接收系统发过来的默认参数（也就是子组件发送过来的参数），然后就可以使用子组件发送过来的参数了。

附张效果图

不吃西红柿、

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
vue 子组件向父组件传递数据（自定义事件）

vue使用props可以让父组件向子组件传递数据，那怎么让子组件向父组件传递数据呢？这里就要用到（自定义事件）。我们在子组件中使用$emit向父组件发射一个自定义事件和数据，通过这个自定义事件我们可以通过父组件的方法获取发送过来的数据<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <sc...
复制链接

扫一扫