Vue基础教程（111）组件和组合API之使用prop向子组件传递数据：Vue Props 深度指南：像给“不孝子”打钱一样传递数据！

嘿，伙计们！今天咱们来聊点Vue里真正“硬核”但又必须掌握的东西——组件通信，特别是老爸（父组件）怎么给儿子（子组件）发零花钱，也就是 使用Prop传递数据。

想象一下这个场景：你，作为一家之主（父组件），掌握着财政大权（数据）。你有个“不孝子”，哦不，是个“宝贝儿子”（子组件），他天天嚷嚷着要买新皮肤、喝奶茶。你不能直接把钱包扔给他对吧？太危险了！万一他给你清空购物车怎么办？

这时候，你就需要一套安全、可控的“零花钱发放机制”。在Vue里，这套机制就叫 Prop。

一、 Prop是什么？你的数据“专属快递员”

简单来说，Prop就是你父组件给子组件传递数据的一个自定义属性。

• 父组件：像个大老板，手里有数据（比如userName="张三"， age=18）。
• 子组件：像个嗷嗷待哺的员工，它需要这些数据来展示内容或执行逻辑。
• Prop：就是老板给员工下发任务的“工作指令”或“资源包”，通过一个自定义的属性传递过去。

核心家规（单向数据流）：
这里有一条铁律，你必须刻在脑子里：Prop是单向绑定的！ 也就是说，数据只能从父组件流向下游的子组件，子组件绝对不能偷偷修改Prop！

为什么？想象一下，如果儿子能随便改老爸给他的零花钱数额，那老爸的账本不就乱套了？这会导致数据流变得难以理解和调试。所以，子组件对Prop只有“读取权”，没有“修改权”。如果它想反馈信息，必须通过“打电话”（$emit事件）告诉老爸。

二、 基础用法：手把手教你“打钱”

我们来点实际的代码。假设我们有一个Child.vue子组件，它想显示老爸给它的名字和年龄。

1. 子组件：声明“收钱账户”（接收Prop）

在子组件里，你需要用props选项来声明：“喂，老爸，我准备接收两个东西，一个叫userName，一个叫userAge，你记得发过来啊！”

Vue 2 Options API 写法：

<!-- Child.vue -->
<template>
  <div class="child">
    <h2>我是儿子组件</h2>
    <p>老爸叫我：{
  
  { userName }}</p>
    <p>老爸说我有：{
  
  { userAge }} 岁了</p>
  </div>
</template>
<script>
export default {