vue3之emit函数向父组件发送数据(setup函数的使用)

最新推荐文章于 2024-02-01 11:20:59 发布

默默努力的小老弟

最新推荐文章于 2024-02-01 11:20:59 发布

阅读量1.2k

点赞数

文章标签： vue.js 前端 html5

本文链接：https://blog.csdn.net/weixin_47039303/article/details/121682612

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app" style="background-color: blue;width:400px; height:400px;">
			<lk @box-click="boxFunc">xxx</lk>
			<!-- boxFunc是父组件的函数，
			也就是说点击了这个会先触发子组件的点击事件
			发送数据给父组件-->
			
			
			
			
		</div>
		<template id="box">
			<div style="background-color: red;width:200px; height:200px;">
				 <div @click="btnClick">点我</div>
			</div>
			 
			
		</template>
	</body>
	<script src="js/vue3.js"></script>
	<script>
	    const Box={
			setup(props,context){
				const {emit}=context;
				function btnClick(){
					
					const dataObj={
						name:'辽阔',
						intro:'i like'
					};
					emit('box-click',dataObj);//子组件向父组件发送数据
					
					
				}
				return{
					btnClick
				}
				
				
			},
			template:'#box',
		}
		const app=Vue.createApp({
			 data(){
				 return {
					 msg:'lk'
				 }
			 },
			components:{
				'lk':Box
			},
			methods:{
				boxFunc(item){
					console.log("来自子组件的数据");
					console.log(item);
				}
			}
			
		});
	
	   app.mount("#app");
	
	</script>

默默努力的小老弟

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue3之emit函数向父组件发送数据(setup函数的使用)

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app" style="background-color: blue;width:400px; height:400px;"> <lk @box-click="boxFunc">xx
复制链接

扫一扫