Vue基础教程（35）Vue.js语法方法选项之传递参数：喂，你的Vue参数在“跨组件漂流”吗？深度解锁组件通信的N种骚操作！

一、为什么你的Vue组件总在“装不熟”？

想象一下：两个Vue组件在同一个页面里天天见面，却因为不会传参，活得像陌生人——一个组件憋红了脸想告诉另一个：“用户点了芝士奶盖茶！”，对方却只能眨巴眼睛表示“我听不见啊！”。

这种场景是不是像极了社恐的你参加公司团建？别急，今天我们就用“组件社交牛逼症”攻略，把Vue传参变成一场丝滑的漂流游戏！先剧透几个名场面：

• 父子组件：像妈妈催你穿秋裤，直接又唠叨（props）
• 子父反向传值：像你给老妈发微信“打钱！”（$emit）
• 跨代传参：堪比家族八卦的隔代遗传（provide/inject）
• 全局事件巴士：模仿广场舞大妈的喇叭广播（EventBus）

准备好了吗？我们先把最简单的“明信片式通信”玩明白！

二、基础篇：父子组件的“明信片快递”（Props）

2.1 把Props想象成奶茶定制小票

假如组件A是奶茶店小哥，组件B是收银台，当用户点单时，小哥需要把“芝士奶盖+少糖+去冰”写在纸条上递给收银台。这就是Props的本质——单向数据流的纸条传递！

<!-- 父组件：奶茶店小哥 -->
<template>
  <div>
    <ChildComponent 
      tea-type="芝士奶盖" 
      sugar="少糖" 
      :price="18"  <!-- 动态绑定价格 -->
    />
  </div>
</template>

<!-- 子组件：收银台 -->
<script>
export default {
  props: {
    teaType: String,        // 字符串型纸条
    sugar: {                // 严谨版纸条验证
      type: String,
      default: "正常糖"
    },
    price: {                // 重要数字必须校验！
      type: Number,
      required: true,
      validator: value => value > 0  // 价格不能是负数哦
    }
  },
  mounted() {
    console.log(`收到订单：${this.teaType}，${this.sugar}，${this.price}元`)
    // 输出：收到订单：芝士奶盖，少糖，18元
  }
}
</script>

关键技巧：

• 用:动态绑定（比如:price）才能传数字/对象等非字符串数据
• Props验证像奶茶店店长检查小票，避免写错“杨枝甘露”变成“僵尸甘鹿”
• 单向数据流意味着：收银台不能擅自修改