vue3 ts 子组件调用父附件方法

在Vue 3中，子组件可以通过`$emit`方法来触发父组件中的方法。以下是一个使用TypeScript的例子：

首先，在父组件中定义一个方法：

<template>
  <div>
    <ChildComponent @childMethod="handleChildMethod" />
  </div>
</template>

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

export default defineComponent({
  components: {
    ChildComponent
  },
  methods: {
    handleChildMethod(data: any) {
      // 处理子组件传递的数据
      console.log(data);
    }
  }
});
</script>

然后，在子组件中通过`$emit`触发父组件中的方法：

<template>
  <button @click="triggerParentMethod">触发父组件方法</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  methods: {
    triggerParentMethod() {
      this.$emit('childMethod', 'Hello from child component');
    }
  }
});
</script>

当子组件按钮被点击时，会触发`triggerParentMethod`方法，并通过`$emit`向父组件传递数据。父组件中的`handleChildMethod`方法会接收到该数据并进行处理。