vue3setup父组件调用子组件方法

在Vue 3中，特别是在使用Composition API（setup语法）的情况下，父组件调用子组件的方法通常涉及到事件监听和props通信。假设有一个父组件ParentComponent，它包含一个通过`<template>`标签导入的子组件ChildComponent，并且你想在子组件有特定行为时从父组件触发并处理该行为。

首先，父组件需要通过`ref`或者直接绑定`v-on`属性来监听子组件内部某个方法的emit事件。例如，如果子组件有个名为`handleAction`的方法：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent @action="handleChildAction" />
</template>

<script setup>
import { ref } from 'vue';
function handleChildAction(data) {
  // 父组件处理子组件发送的数据
  console.log('Received data:', data);
}
</script>

然后，在子组件ChildComponent中，你可以通过`this.$emit`来触发这个事件并传递数据：

<!-- ChildComponent.vue -->
<template>
  <!-- ... -->
  <button @click="$emit('action', someData)">触发动作</button>
</template>

<script setup>
export default {
  methods: {
    handleSomeAction() {
      this.$emit('action', /* 在这里传递你需要的数据 */);
    }
  }
};
</script>

当用户点击按钮时，子组件的`handleSomeAction`会被调用，进而触发`action`事件并将数据传给父组件。