vue3 ts 子组件调取父组件方法 使用setup

在Vue3中，子组件可以通过使用`defineExpose`函数来暴露方法给父组件调用。首先，在子组件的`<script setup>`中定义需要暴露的方法，例如：

<script setup lang="ts">
import { defineExpose } from "vue"

const change = () => {
  alert(222)
}

defineExpose({ change })
</script>

然后，在父组件中引用子组件时，添加`ref`属性，并在父组件的`<script setup>`中使用`ref`来获取子组件的引用，例如：

<template>
  <div>
    <a-button @click="submit">提交</a-button>
    <Jelly ref="flow" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"

const flow = ref(null)

const submit = () => {
  console.log(flow.value.change())
}

return {
  submit,
  flow
}
</script>

在这个例子中，我们在父组件中使用`ref`来获取子组件的引用，并将其绑定到`flow`上。然后，我们可以通过`flow.value.change()`来调用子组件暴露的`change`方法。需要注意的是，使用`ref`创建的响应式对象需要使用`.value`语法来访问其值。