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

75 阅读 0 评论 50 点赞

我是靠谱客的博主危机蚂蚁，最近开发中收集的这篇文章主要介绍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">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>