在 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>
二、Vue 3 中实现方式
Vue 3 分为 Options API（和 Vue 2 类似）和 Composition API（主流）两种写法，核心仍基于
ref，但语法有差异。1. Options API 写法（兼容 Vue 2）
和 Vue 2 几乎一致，仅需注意：Vue 3 中
this.$refs获取的是组件的代理对象，调用方法的逻辑不变。
