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

在Vue 3和TypeScript中，父组件可以通过使用`props`和`emit`来调用子组件的方法。下面是一个简单的示例，展示了如何在父组件中调用子组件的方法：

父组件（ParentComponent.vue）：

<template>
  <div>
    <ChildComponent :message="parentMessage" @childEvent="handleChildEvent" />
  </div>
</template>

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

export default defineComponent({
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  setup() {
    const parentMessage = 'Hello from parent'
    const handleChildEvent = (eventData: any) => {
      console.log('Received child event:', eventData)
      // 在这里可以对子组件的事件进行处理
    }
    return {
      parentMessage,
      handleChildEvent
    } as PropOptions<ChildComponent> & {}
  }
})
</script>

子组件（ChildComponent.vue）：

<template>
  <div>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

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

export default defineComponent({
  name: 'ChildComponent',
  props: {
    message: String,
  },
  methods: {
    sendMessage() {
      this.$emit('childEvent', this.message) // 触发名为 'childEvent' 的事件，并传递当前组件的 'message' prop 作为参数
    }
  }
})
</script>

在上面的示例中，父组件通过`<ChildComponent :message="parentMessage" @childEvent="handleChildEvent" />`来将`parentMessage`传递给子组件，并通过`@childEvent`监听子组件的`childEvent`事件。当子组件触发该事件时，父组件将通过`handleChildEvent`方法处理该事件。在子组件中，我们有一个按钮，当点击该按钮时，会触发名为`childEvent`的事件，并将当前的`message` prop作为参数传递给父组件。在父组件中，我们通过监听这个事件来处理子组件传递过来的数据。

请注意，这只是一个简单的示例，实际情况可能更复杂。你可以根据具体需求调整代码，以满足你的项目要求。