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

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

vue3.x 父子组件通信是经常会遇到的

1. 父组件给子组件传参可以通过 props 来实现，父组件调用子组件方法和获取子组件数据 通过 xxxRef.value.子组件方法() 和 xxxRef.value.子组件数据 实现
2. 子组件调用父组件方法使用 emit 来实现
3. 祖孙组件传值和调用方法使用 provide / Inject 来实现

今天介绍的是vue3.x子组件调用父组件方法并获取方法的返回值如何实现，
正常首先会想到是方法里面勇return返回值，就能获取到，但是实际是行不通的，要使用callback，废话不多说了，直接上代码

父组件：

<div>
	<ChildComponent @getFatherData="getData"></ChildComponent>	
</div>

<script lang="ts" setup>
    import {ref, reactive, onMounted,nextTick} from 'vue'
    import ChildComponent from './childComponent.vue'

	const getData = (callback)=>{
		let data = Math.random();
		//接下来执行一系列逻辑操作之后
		
        callback(data); //返回data值
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

子组件childComponent.vue

<div>
	{{childData}}	
	<el-button @click="getDataValue()">获取</el-button>	
</div>

<script lang="ts" setup>
    import {ref, reactive, onMounted,nextTick} from 'vue'
	const childData = ref(0);
	const emit = defineEmits<{
        (event: "getFatherData", data: object): void
    }>()

	const getDataValue = ()=>{
		emit('getFatherData', (val: number) => {childData.value = val });
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16