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

在 Vue 3 中，如果你正在使用 TypeScript，子组件可以通过 props 和自定义事件 (emits) 来调用父组件的方法。以下是一个简单的例子：

1. **通过props传递方法**:
父组件可以将需要调用的方法作为 prop 传给子组件：

   // 父组件 template
   <template>
     <ChildComponent :parentMethod="doSomething" />
   </template>

   // 父组件 script
   export default {
     methods: {
       doSomething(value) {
         console.log('Parent method called:', value);
       }
     },
     components: {
       ChildComponent: {
         props: ['parentMethod']
       }
     }
   }

子组件接收到这个方法后可以在适当的时候调用它。

2. **通过自定义事件 (emits)**:
如果你想让子组件触发一个动作并通知父组件响应，可以使用 `@emit`：

   // 子组件 template
   <button @click="callParentMethod">Call Parent Method</button>

   // 子组件 script
   import { Component, Emit } from 'vue';

   export default class ChildComponent extends Component {
     emitMethod() {
       this.$emit('parent-method-called', 'Some data');
     }
   }

然后在父组件接收这个事件并处理：

   // 父组件 script
   mounted() {
     this.$on('parent-method-called', data => {
       console.log('Parent received:', data);
     });
   }