vue 父组件调用子函数

### 调用子组件方法的最佳实践

在 Vue 中，父子组件之间的通信遵循单向数据流的原则。为了实现从父组件调用子组件中的方法，推荐的方式是通过 `ref` 属性来获取子组件实例并调用其公开的方法。

#### 使用 ref 获取子组件实例

当需要直接访问子组件时，在模板中给 `<child-component>` 添加一个唯一的 `ref` 值：

<template>
  <div class="parent">
    <button @click="callChildMethod">Call Child Method</button>
    <child-component ref="myChild"></child-component>
  </div>
</template>

<script>
export default {
  methods: {
    callChildMethod() {
      this.$refs.myChild.childMethod(); // 调用子组件的方法
    }
  }
}
</script>

这种方法简单直观，适用于简单的场景[^1]。

#### 子组件暴露公共 API

为了让父组件能够安全地调用特定功能而不破坏封装性，可以在子组件内部定义 `$emit` 或者使用 `provide / inject` 组合提供有限接口。然而最常见的是利用 `methods` 定义可被外部调用的行为：

// 子组件
export default {
  name: 'ChildComponent',
  methods: {
    childMethod() {
      console.log('This method was called by Parent');
    }
  }
};

这种方式不仅保持了良好的解耦设计模式，还使得代码更易于维护和测试。

#### 避免滥用 $refs 和直接操作 DOM

虽然可以方便地通过 `$refs` 访问到子组件实例及其属性/方法，但这并不意味着应该频繁这样做。过度依赖于这种机制可能会导致组件间紧密耦合，降低灵活性。因此建议仅限于确实必要的场合下才这么做，并考虑其他替代方案如事件总线或 Vuex 状态管理库等。