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

在 Vue 3 中，子组件可以通过 `emit` 方法调用父组件的方法。这是一种通信方式，允许子组件向父组件发送自定义事件，并且可以在父组件中监听并执行相应的方法。

以下是一个示例代码：

父组件：

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

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

export default defineComponent({
  components: {
    ChildComponent,
  },
  methods: {
    parentMethod() {
      // 在父组件中定义的方法
      console.log('Parent method called');
    },
  },
});
</script>

子组件：

<template>
  <div>
    <button @click="callParentMethod">Call Parent Method</button>
  </div>
</template>

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

export default defineComponent({
  methods: {
    callParentMethod() {
      // 在子组件中调用父组件的方法
      this.$emit('childMethod');
    },
  },
});
</script>

在上面的示例中，父组件中使用 `@childMethod` 监听子组件触发的自定义事件，并在 `parentMethod` 方法中处理相应的逻辑。在子组件中，通过 `this.$emit` 触发自定义事件，从而调用了父组件的方法。