Vue 中如何实现父组件调用子组件的方法？

开会员与付费前请必须阅读这篇文章，在首页置顶第一篇：（进站必看本站VIP介绍/购买须知）
本站所有源码均为自动秒发货，默认（百度网盘）

在 Vue 组件化开发中，组件间的通信是核心知识点之一。我们常遇到子组件调用父组件方法（如通过$emit），但反过来父组件主动调用子组件的方法也是高频需求 —— 比如父组件点击按钮触发子组件的表单重置、数据刷新、弹窗显示等操作。本文将从基础原理到实战案例，完整讲解 Vue 2 和 Vue 3 中父组件调用子组件方法的实现方式，兼顾易用性和最佳实践。

核心原理：获取子组件实例

Vue 中父组件要调用子组件方法，核心是先获取子组件的实例对象，再通过实例直接调用其暴露的方法。不同 Vue 版本的实现方式略有差异，但核心逻辑一致：

给子组件添加标识（Vue 2 用ref，Vue 3 组合式 API 也用ref）；
父组件通过标识获取子组件实例；
调用实例上的方法。

一、Vue 2 中实现方式

Vue 2 中主要通过ref属性结合this.$refs获取子组件实例，步骤如下：

1. 基础实现

子组件（Child.vue）

vue

<template>
  <div>子组件：{{ count }}</div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    // 子组件暴露的方法：累加计数
    increment() {
      this.count++
      console.log('子组件count已更新：', this.count)
    },
    // 子组件暴露的方法：重置计数
    resetCount() {
      this.count = 0
      console.log('子组件count已重置')
    }
  }
}
</script>

父组件（Parent.vue）

vue

<template>
  <div>
    <h3>父组件</h3>
    <!-- 1. 给子组件添加ref标识 -->
    <Child ref="childRef" />
    <!-- 2. 点击按钮调用子组件方法 -->
    <button @click="callChildIncrement">调用子组件累加方法</button>
    <button @click="callChildReset">调用子组件重置方法</button>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  methods: {
    // 调用子组件increment方法
    callChildIncrement() {
      // 3. 通过this.$refs.标识 获取子组件实例，调用方法
      this.$refs.childRef.increment()
    },
    // 调用子组件resetCount方法
    callChildReset() {
      this.$refs.childRef.resetCount()
    }
  }
}
</script>

2. 注意事项（Vue 2）

ref在 DOM 渲染完成后才会生成，若在created钩子中调用this.$refs会得到undefined，需在mounted或后续生命周期调用；

若子组件是循环渲染（v-for），this.$refs.标识会是一个数组，需通过索引获取对应实例：

vue

<template>
  <Child v-for="i in 3" :key="i" ref="childList" />
</template>

<script>
export default {
  mounted() {
    // 调用第二个子组件的方法
    this.$refs.childList[1].increment()
  }
}
</script>