---
title: Vue2中子组件向父组件传值的两种方式prop和emit
description: 在B站看到一个Vue2的进阶视频，提到了子组件向父组件传递数据可以使用prop的方式，觉得很差异，因为官方文档里面提到的是单向下行绑定。父级 prop 的更新会
author: chaihongjun
category: frontend
published: 2024-11-29
url: https://chaihongjun.me/frontend/30.html
---

# Vue2中子组件向父组件传值的两种方式prop和emit

在B站看到一个[Vue2的进阶视频](https://www.bilibili.com/video/BV1AM4y1n7Fd/?p=13&vd_source=fa3a0cd95111b0c80c64abdab16151c6)，提到了子组件向父组件传递数据可以使用prop的方式，觉得很诧异，因为官方文档里面提到的是单向下行绑定。

> 父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

但是根据实际使用的情况，有时候却需要这么操作，所以总结起来的子组件向父组件传递数据有两种方式prop和emit。

首先总结一下传统的emit方式：
MDBLOCK0
父组件通过getDataFromSonByEmit这个函数(方法)来监听并处理子组件Student的自定义方法CustomEventName。进而可以在getDataFromSonByEmit这个函数内接收子组件“发送”来的数据并做处理。
MDBLOCK1
子组件的自定义方法CustomEventName，需要在子组件内被触发，触发之后通过this.$emit(自定义事件名称, 携带的参数)的方式向父组件通知并携带参数。

所以核心的代码：
MDBLOCK2
以上是普遍使用的emit方法，另外一种就是prop方式：
MDBLOCK3
注意子组件的属性sonProp绑定的是一个方法getDataFromSonByProp，这个方法是父组件的方法。一般情况，prop绑定的变量是数组或者对象或者其他[任意类型的值](https://v2.cn.vuejs.org/v2/guide/components-props.html#%E4%BC%A0%E9%80%92%E9%9D%99%E6%80%81%E6%88%96%E5%8A%A8%E6%80%81-Prop)。官网文档示例里面并没有提及(Function)方法。这里子组件属性绑定了父组件的方法。
MDBLOCK4
核心的代码：

MDBLOCK5
子组件通过某一个方法触发了prop属性，实际就是父组件的方法，同时把子组件的数据传递到了父组件的方法内，父组件通过自己的响应式状态变量去接收这个数据。

---

> 本文首发于 [chaihongjun.me | 柴宏俊 web 技术学习笔记](https://chaihongjun.me/frontend/30.html)，采用 CC BY-NC-ND 4.0 协议，转载请保留出处与链接。