vue3子组件调用父组件的方法并获取返回值

最新推荐文章于 2024-08-14 16:24:45 发布

徐_三岁

最新推荐文章于 2024-08-14 16:24:45 发布

阅读量2k

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_49078296/article/details/130647428

版权

需求：子组件需要向父组件传参，并获取父组件的返回值，父组件的方法自身也需要传参。

子组件

<script lang="ts" setup>
	const emits = defineEmits(["handleSave"]);
	const save = () => {
	  emits("handleSave", {
	    val: inputValue.value,
	    callback: (result: any) => {
	    	console.log('获取父组件方法的返回值',result)
	    },
	  });
	};

父组件

<template>
  <el-table :data="tableData">
	<el-table-column prop="funds" label="经费">
         <template #default="scope">
            <childEdit v-model="scope.row.funds" @handleSave="handleSave($event,scope.row,'funds')"></childEdit >
          </template>
     </el-table-column>
  </el-table>
</template>

<script setup>
const handleSave = async (e,val,key)=>{
  console.log('子组件的参数',e.value)
  val[key] = Number(e.val)
  //给子组件返回值
  e.callback(true)
}
</script>