Vue基础教程（116）组件和组合API之子组件向父组件传递数据：深度吃瓜：Vue家庭伦理剧—

兄弟们，姐妹们，Vue开发者们！今天我们不聊枯燥的概念，来嗑一场Vue世界里的“家庭伦理剧”。想象一下，你的应用是一个家庭，父组件就是那个掌握财政大权（数据）、说一不二的老爸，而子组件就是那个想买新皮肤、想出去玩，但兜里没钱没权限的“好大儿”。

问题来了：儿子有需求，怎么向老爸提？直接修改老爸的银行卡密码？No, no, no！在Vue的“家规”（单向数据流）里，这是大逆不道！儿子只能被动接受老爸给的钱（props），但绝不能反过来直接偷老爸的钱（修改props）。

那怎么办？难道要儿子一直憋着吗？当然不是！今天，我们就来学习Vue世界里，儿子“策反”老爸的官方指定唯一合法途径——自定义事件。说白了，就是儿子要学会如何“会哭的孩子有奶吃”！

第一幕：家规基石——单向数据流，为啥不能“子夺父权”？

在深入“策反”技巧前，我们必须先理解这条“家规”为什么存在。想象一下，如果每个儿子都能随便修改老爸的数据：

数据流向混乱：一个数据被N个儿子到处改，出了问题你都不知道是哪个“逆子”干的。
调试如同破案：代码会变成一团乱麻，维护起来堪比在迷宫找头猪。
组件失去纯真：组件不再单纯，它们之间互相耦合，牵一发而动全身。

所以，Vue立下铁律：数据向下，事件向上。老爸通过props把钱（数据）传递给儿子，这叫“数据向下”。儿子通过自定义事件向老爸发送信号（“我要买皮肤！”），老爸收到信号后，自己决定是否掏钱、如何掏钱，这叫“事件向上”。

理解了这一点，我们的“策反”大计就有了理论依据。

第二幕：经典老派打法——Options API 下的“加密通话”

在Vue 2和Options API的世界里，我们使用$emit这个“秘密传声筒”来建立父子间的“加密通话”。

$emit 使用说明书：

作用：子组件触发一个自定义事件，并且可以“捎带”一些数据（私房钱理由）给父组件。
语法：this.$emit('事件名', 要传递的数据)

光说不练假把式，我们来上演第一场情景剧：《儿子想买新皮肤》。

完整代码示例一：基础“讨钱”术

父组件 (Parent.vue) - 手握钱包的老爸

<template>
  <div class="parent">
    <h2>我是老爸，我的钱包：{{ money }}元</h2>
    <!-- 监听儿子发出的“requestMoney”事件 -->
    <!-- 当事件发生时，调用自己的handleRequest方法 -->
    <Child @request-money="handleRequest" />
  </div>
</template>
<script>
import Child from './Child.vue'

export default {
  components: { Child },
  data() {
    return {
      money: 1000
    }
  },
  methods: {
    // 老爸定义的处理函数，会接收到儿子“捎来”的数据
    handleRequest(reason) {
      if (this.money >= 888) {
        this.money -= 888;
        console.log(`老爸心一软，批了！理由：“${reason}”，钱包还剩${this.money}元`);
      } else {
        console.log('老爸怒吼：“滚！没钱！”');
      }
    }
  }
}
</script>

子组件 (Child.vue) - 心怀鬼胎的儿子

<template>
  <div class="child">
    <h3>我是儿子，我想买游戏皮肤！</h3>
    <button @click="askForMoney">向老爸讨888元</button>
  </div>
</template>
<script>
export default {
  methods: {
    askForMoney() {
      // 触发一个名为“requestMoney”的自定义事件，并捎上一句话
      this.$emit('request-money', '不买这个皮肤我就在同学面前抬不起头了！');
    }
  }
}
</script>

剧情解析：

儿子（子组件）点击按钮，执行askForMoney方法。
该方法通过this.$emit('request-money', ...)向外界（老爸）大声喊出了一句话：“我触发了request-money事件！这是理由！”
老爸（父组件）在模板里用@request-money="handleRequest"时刻监听着这个事件。就像装了窃听器，儿子一喊，老爸的handleRequest方法立马被调用。
老爸的方法收到了儿子“捎来”的理由字符串，然后开始自己的逻辑判断：钱够吗？理由充分吗？最后决定是慷慨解囊还是无情拒绝。

划重点：

事件名最好使用kebab-case（烤串命名法），如request-money。
$emit的第二个参数可以是任何类型的数据：数字、字符串、对象，甚至是一个函数（虽然不常见）。

第三幕：新潮函数式——Composition API 的“摩斯密码”

时代在进步，Vue 3带来了更灵活的Composition API。在这里，我们没有this，那“秘密传声筒”$emit去哪找？别急，它藏在了新的setup函数里！

完整代码示例二：升级版“心智博弈”

父组件 (Parent.vue) - 进化版老爸

<template>
  <div class="parent">
    <h2>我是（进化版）老爸，我的钱包：{{ money }}元</h2>
    <!-- 用法一模一样！ -->
    <Child @request-money="handleRequest" />
  </div>
</template>
<script setup>
import { ref } from 'vue';
import Child from './Child.vue';

const money = ref(1000);

// 定义事件处理函数
const handleRequest = (reason) => {
  if (money.value >= 888) {
    money.value -= 888;
    console.log(`老爸经过思考，批了！理由：“${reason}”，钱包还剩${money.value}元`);
  } else {
    console.log('老爸冷静拒绝：“孩子，我们要理性消费。”');
  }
};
</script>

子组件 (Child.vue) - 会玩套路的孩子

<template>
  <div class="child">
    <h3>我是（会玩套路的）儿子，我想去旅游！</h3>
    <button @click="sendRequest">申请旅游经费</button>
  </div>
</template>
<script setup>
// 1. 导入 defineEmits
import { defineEmits } from 'vue';

// 2. 定义你要发射的事件
// defineEmits可以是数组形式（只定义事件名）或对象形式（可做参数验证）
const emit = defineEmits(['request-money']);

// 3. 准备一个“完美”的理由
const sendRequest = () => {
  const reason = "这不是玩乐，是开阔眼界、增长见识的社会实践！";
  // 4. 使用emit函数触发事件
  emit('request-money', reason);
};
</script>

技术解密：

defineEmits：这是Composition API中的“声明器”，用于明确告诉Vue：“我这个组件准备发射这些事件”。它返回一个emit函数。
emit函数：这就是新的“秘密传声筒”！它的作用和this.$emit一模一样，只不过是通过函数调用的方式。

高级玩法：事件参数验证

就像老爸可以提前规定儿子讨钱时必须提交书面申请一样，我们也可以对事件进行验证。

<script setup>
const emit = defineEmits({
  // 验证函数，返回true表示事件有效，false则无效并在控制台报警告
  'request-money': (reason) => {
    if (reason && reason.length > 5) {
      return true; // 理由超过5个字符才有效
    } else {
      console.warn('理由太敷衍，不予处理！');
      return false;
    }
  }
});

// ... 其余代码相同
</script>

第四幕：实战避坑指南 & 最佳“家规”

理论懂了，代码会写了，但在真实的“家庭生活”（项目开发）中，怎样才能更和谐呢？

起个好名字：事件名要像update:title、form-submit这样语义化清晰，别用handleClick、doSomething这种模棱两可的名字。
保持数据不可变：子组件“捎给”老爸的数据，最好是原始类型或一个全新的对象，不要直接传递一个引用类型然后让老爸去修改，这容易又回到“数据流向混乱”的老路。
“v-model”是语法糖：你知道v-model其实就是“props + event”的语法糖吗？v-model="pageTitle" 等价于 :value="pageTitle" @input="pageTitle = $event"。理解了子传父，你就彻底懂了v-model的本质。
复杂场景用状态管理：当“家庭成员”（组件）太多，关系太复杂时（比如叔伯侄子之间都要通信），就别再用“传声筒”挨个传话了，太累！直接请个“家庭管家”——Pinia 或 Vuex，来集中管理所有数据和逻辑。