vue3 +tsx 子组件调用父组件方法

在Vue3中，子组件可以通过`defineExpose`方法将自己的方法暴露给父组件调用。而父组件可以通过`ref`获取子组件实例，从而调用子组件的方法。下面是一个示例代码：

子组件代码：

<script setup lang="ts">
  const callParentMethod = (msg: string) => {
    console.log(msg);
  };
  defineExpose({ callParentMethod });
</script>

<template>
  <div>子组件</div>
</template>

<style scoped>
</style>

父组件代码：

<template>
  <div>
    <ChildComponent ref="child"></ChildComponent>
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import ChildComponent from './ChildComponent.vue';

  const childComponent = ref<{ callParentMethod(msg: string): void }>();

  const callChildMethod = () => {
    childComponent.value?.callParentMethod('来自父组件的消息');
  };

  // 获取子组件实例
  const getChildComponent = () => {
    childComponent.value = (this.$refs.child as any).$exposed;
  };
</script>

<style scoped>
</style>

在父组件中，我们通过`ref`获取了子组件实例，并将其赋值给`childComponent`。然后在`callChildMethod`方法中，我们调用了子组件的`callParentMethod`方法。需要注意的是，在调用子组件方法之前，我们需要先获取子组件实例，这里我们通过`this.$refs.child`获取到子组件的实例，然后再将其赋值给`childComponent`。