vue3 typescript 父组件调用子组件的方法

在 Vue3 中结合 TypeScript 使用，父组件调用子组件的方法通常涉及props传递和事件监听。假设你有一个子组件 `ChildComponent.vue`：

// ChildComponent.vue (TS)
<template>
  <button @click="doSomething">点击我</button>
</template>

<script lang="ts">
import { Component, Prop } from 'vue';

@Component({
  name: 'ChildComponent'
})
export default class ChildComponent extends Vue {
  @Prop() parentMethod: () => void; // 定义一个 prop 接收父组件的方法

  doSomething() {
    this.parentMethod(); // 调用父组件传过来的方法
  }
}
</script>

然后，在父组件 `ParentComponent.vue` 中，你可以这样调用子组件并传递方法：

// ParentComponent.vue (TS)
<template>
  <ChildComponent :parentMethod="callSomeFunction" />
</template>

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

export default class ParentComponent extends Component {
  private someFunction = (): void => {
    console.log('这是父组件的方法');
  }

  callSomeFunction() {
    this.someFunction();
  }
}
</script>

当用户点击子组件中的按钮时，会触发 `doSomething` 方法，进而调用 `parentMethod`，也就是 `callSomeFunction`。