【vue3】vue3 setup父组件如何调用子组件方法？

setup是一个组件选项，在组件被创建之前，props 被解析之后执行。它是组合式 API 的入口。
他接受两个参数：

{Data} props
{SetupContext} context

在vue2中，我们通常使用this.$refs.childNode.clickButton()调用子组件方法。vue3中setup也是可以用这种方法，只不过需要用ref小小的处理一下。
ref接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象仅有一个 .value property，指向该内部值。

父组件index.vue：

<script lang="ts">
import { ref } from "vue"
import SetupRender from './setupRender.vue'
export default {
	components:{SetupRender},
	setup(){
		const setupRender = ref(null)
		//创建响应式ref对象，并在子组件标签上加上 ref="setupRender"
		const clickChild = ():void => {
           (setupRender as any).value.clickButton()
           //setupRender编译报错的话，就用as any转一下
        }
        return {
			clickChild //return出来让模板使用，如果是setup语法糖，模板可以直接使用，不用return
		}
	}
}
</script>
<template>
    <div>
        <SetupRender ref="setupRender"></SetupRender>
        <button @click="clickChild">父组件按钮</button>
    </div>
</template>

子组件setupRender.vue：

<script setup lang="ts">
function clickButton(){
    alert(666)
}
defineExpose({clickButton})
//因为这个组件用了setup语法糖，所以要这样导出方法，才能被父组件获取到
//常规的setup选项直接return出来方法就行 return { clickButton }
//defineExpose是编译器宏，所以不用引入
</script>
<template>
    <div>
        <button class="test" @click="clickButton">子组件按钮</button>
    </div>
</template>

有帮助的话，点个赞呗！关于vue3的一切疑问，大家可以在评论区留言提问。

上一篇：vue3 setup如何使用render渲染函数？
下一篇：vue3 setup如何使用props？