uni-app是国内常见的多端开发框架之一，本篇文章就来介绍在uni-app中使用vue+setup如何实现在父级页面中调用子组件中的方法。

不同于vue2父级页面调用子组件方法，vue3+setup实现方法如下：

一、vue3+setup父级页面代码

<testBox ref="customerRef"></testBox>
<script lang="ts" setup>
	import { ref } from 'vue'
	import testBox from "@/components/test.vue"
	const customerRef = ref(null)
	const guidance = () => {
		customerRef.value.changeStatus()
	}
</script>

二、vue3+setup子组件代码

<script setup lang="ts">
	defineExpose({
		changeStatus
	});
	const changeStatus = (e) => {
		console.log("六月初技术站")
	}
</script>

defineExpose是vue3新增的一个api，放在<scipt setup>下使用的，目的是把属性和方法暴露出去，可以用于父子组件通信，子组件把属性暴露出去， 父组件用ref获取子组件DOM，子组件暴露的方法或属性可以用dom获取。