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

在 Vue 3 中，如果子组件需要调用父组件的方法，你可以使用 `emit` 方法来触发一个自定义事件，在父组件中监听这个事件并执行相应的方法。下面是一个示例：

// 父组件
<template>
  <div>
    <ChildComponent @childEvent="handleChildEvent" />
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
  components: {
    ChildComponent,
  },
  methods: {
    handleChildEvent(payload) {
      // 处理子组件触发的事件
      console.log('Received payload from child component:', payload);
    },
  },
});
</script>

// 子组件
<template>
  <div>
    <button @click="triggerEvent">触发事件</button>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  emits: ['childEvent'],
  methods: {
    triggerEvent() {
      // 触发自定义事件，并传递数据给父组件
      this.$emit('childEvent', 'Hello from child component');
    },
  },
});
</script>

在父组件中，我们使用 `@childEvent` 来监听子组件触发的自定义事件，并在 `handleChildEvent` 方法中处理事件。在子组件中，我们使用 `this.$emit` 来触发自定义事件，并可以传递一些数据给父组件。

这样，当点击子组件中的按钮时，会触发 `childEvent` 事件，父组件会接收到这个事件并执行相应的方法。你可以根据需要在父组件中定义自己的方法来处理子组件触发的事件。