vue3中怎么调用子组件的方法

### Vue3 父组件调用子组件方法

在 Vue 3 中，父组件可以通过 `ref` 来获取子组件实例并调用其公开的方法。为了实现这一点，首先需要确保子组件中的方法被正确暴露给外部访问。

#### 子组件定义

子组件应当导出默认对象，并在其内部声明希望对外部开放的方法：

// ChildComponent.vue
<template>
  <!-- 组件模板 -->
</template>

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

export default defineComponent({
  name: "ChildComponent",
  
  methods: {
    callMethod(message) {
      console.log(`Message received: ${message}`);
    }
  },
});
</script>

此部分展示了如何创建一个简单的子组件以及其中可以由外界调用的方法[^1]。

#### 父组件定义

接下来，在父组件中引入子组件并通过 `ref` 属性为其指定唯一标识符以便后续操作该子组件实例：

<!-- ParentComponent.vue -->
<template>
  <div class="parent">
    <button @click="invokeChildMethod">Invoke child method</button>
    
    <ChildComponent ref="childInstance"></ChildComponent>
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue'; // 假设路径如此

export default {
  components: {
    ChildComponent,
  },

  setup() {
    const childInstance = ref(null);

    function invokeChildMethod() {
      if (childInstance.value && typeof childInstance.value.callMethod === 'function') {
        childInstance.value.callMethod('Hello from parent!');
      }
    }

    return {
      childInstance,
      invokeChildMethod,
    };
  },
};
</script>

上述代码片段说明了怎样在一个按钮点击事件处理器内通过 `ref` 访问到子组件实例及其特定函数来执行相应逻辑[^3]。

此外，当涉及到更复杂的场景比如带有参数的情况时，也可以按照相同方式处理，只需确保传递必要的参数即可。