vue3 子组件调用父组件方法（长文讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在 Vue 3 开发中，组件化架构是其核心优势之一。然而，当父组件与子组件需要交互时，如何高效且规范地实现方法调用，成为开发者必须掌握的关键技能。本文将深入探讨 vue3 子组件调用父组件方法 的实现逻辑与最佳实践，通过循序渐进的讲解和代码示例，帮助开发者构建清晰、可维护的组件通信模式。

一、组件通信的基本概念

在 Vue 3 中，组件间通信遵循“单向数据流”原则：数据从父组件流向子组件，而子组件通过事件向父组件传递信息。父组件与子组件的关系，可以类比为“管理者与执行者”：父组件负责管理整体状态，子组件则专注于执行特定功能。当子组件需要触发父组件的方法时，必须通过预定义的通信机制，而非直接访问父组件的内部逻辑。

1.1 父组件与子组件的关系

• 父组件：通常负责数据管理、状态维护和子组件的渲染。
• 子组件：专注于执行单一功能，例如表单输入、按钮点击等。

例如，假设父组件包含一个计数器，子组件是一个按钮。当用户点击按钮时，子组件需要通知父组件更新计数器的值。这种场景下，子组件需要调用父组件的方法。

二、vue3 子组件调用父组件方法的两种核心方式

在 Vue 3 中，子组件调用父组件方法主要有两种方式：通过 props 传递方法 和 通过事件触发。

2.1 方式一：通过 props 传递方法

父组件可以直接将方法通过 props 传递给子组件，子组件通过调用该 props 中的方法实现交互。

示例代码

父组件代码（ParentComponent.vue）：

<template>  
  <ChildComponent :handleClick="incrementCounter" />  
</template>  

<script setup>  
import { ref } from 'vue';  
import ChildComponent from './ChildComponent.vue';  

const count = ref(0);  

const incrementCounter = () => {  
  count.value += 1;  
  console.log('计数器值：', count.value);  
};  
</script>  

子组件代码（ChildComponent.vue）：

<template>  
  <button @click="triggerParentMethod">点击调用父组件方法</button>  
</template>  

<script setup>  
const props = defineProps({  
  handleClick: {  
    type: Function,  
    required: true  
  }  
});  

const triggerParentMethod = () => {  
  props.handleClick();  
};  
</script>  

优点与缺点

2.2 方式二：通过事件触发

子组件通过 $emit 触发事件，父组件监听该事件并执行对应方法。这种方式更符合 Vue 的“事件驱动通信”原则，推荐在多数场景中使用。

示例代码

父组件代码（ParentComponent.vue）：

<template>  
  <ChildComponent @custom-event="handleChildEvent" />  
</template>  

<script setup>  
import { ref } from 'vue';  
import ChildComponent from './ChildComponent.vue';  

const count = ref(0);  

const handleChildEvent = (payload) => {  
  count.value += payload.value;  
  console.log('计数器值：', count.value);  
};  
</script>  

子组件代码（ChildComponent.vue）：

<template>  
  <button @click="emitEvent">点击触发父组件事件</button>  
</template>  

<script setup>  
const emit = defineEmits(['custom-event']);  

const emitEvent = () => {  
  emit('custom-event', { value: 1 });  
};  
</script>  

优点与缺点

三、深入理解事件驱动通信机制

Vue 3 的事件系统基于事件总线（Event Bus）和组件间 $emit/$on 实现。在父子组件场景中，子组件通过 $emit 触发事件，父组件通过 v-on 监听并执行对应方法。这种模式的优势在于：

1. 松耦合：父组件无需暴露具体方法名称，子组件仅需触发事件；
2. 可扩展性：父组件可同时监听多个子组件的事件，或动态调整事件处理逻辑。

比喻解释

可以将事件机制想象为“信号灯系统”：子组件按下按钮（触发事件），父组件根据信号灯的颜色（事件名）执行对应操作（方法）。这种方式避免了父子组件直接“硬连接”，提高了系统的灵活性。

四、常见场景与进阶技巧

4.1 传递参数与返回值

子组件可以通过 $emit 传递参数，父组件在监听事件时接收参数并处理。例如：

子组件代码：

const emitEventWithParam = () => {  
  const param = { id: 1, name: '示例' };  
  emit('custom-event', param);  
};  

父组件代码：

const handleChildEvent = (param) => {  
  console.log('接收到参数：', param); // 输出：{ id: 1, name: '示例' }  
};  

4.2 在 Composition API 中使用

Vue 3 的 setup() 函数和 Composition API 对事件机制提供了更简洁的语法支持。例如，在子组件中通过 defineEmits 声明事件：

<script setup>  
const emit = defineEmits(['update:modelValue']); // 定义事件名称  
const triggerEvent = () => {  
  emit('update:modelValue', '新值'); // 触发事件并传递参数  
};  
</script>  

4.3 避免直接访问父组件实例

Vue 官方不推荐通过 this.$parent 直接调用父组件的方法，因为这种做法会破坏组件的封装性，导致代码难以维护。

五、最佳实践与注意事项

5.1 设计原则

• 单一职责：子组件应专注于自身功能，避免承担过多逻辑；
• 事件命名规范：采用 kebab-case 命名事件（如 update-data），避免拼写错误；
• 类型校验：通过 props 的 type 和 required 属性确保数据传递的可靠性。

5.2 性能优化

• 避免在高频事件（如 @input）中频繁触发复杂方法；
• 使用 v-once 或 v-memo 减少不必要的重复渲染。

六、常见问题解答

6.1 问题：子组件触发事件后，父组件方法未执行

可能原因：

• 父组件未正确监听事件名（如拼写错误）；
• 子组件未通过 defineEmits 声明事件。

解决方案：
检查父组件的 @event-name 是否与子组件的 $emit 名称完全一致。

6.2 问题：通过 props 传递方法时，子组件无法调用

可能原因：

• 父组件未将方法通过 props 传递给子组件；
• 子组件未通过 props 接收方法。

解决方案：
确保父组件模板中传递方法：<Child :handleMethod="parentMethod" />，并在子组件中声明 props：defineProps({ handleMethod: Function })。

结论

通过本文的讲解，开发者可以掌握 vue3 子组件调用父组件方法 的两种核心方式，并理解其背后的通信机制与设计原则。无论是通过 props 直接传递方法，还是通过事件触发，关键在于遵循“单向数据流”和“松耦合”的设计思想。在实际开发中，建议优先使用事件驱动模式，以提升代码的可维护性和扩展性。通过不断实践和优化，开发者能够构建出高效、健壮的 Vue 3 应用。

希望本文能帮助开发者理清组件通信逻辑，为构建复杂应用奠定坚实基础！