在 Vue.js 开发中，组件间的通信是核心能力之一。props 和 events 是父子组件交互的两大基石，掌握它们能有效构建可复用的组件体系。

📌 props：数据传递的桥梁

基本用法

  • 父组件通过 props 向子组件传递数据
  • 子组件通过 props 接收并使用数据
  • 示例：
    // 父组件
<template>
  <ChildComponent :message="parentMsg" />
</template>

// 子组件
<script>
export default {
  props: ['message']
}
</script>

特性

  • 单向数据流：父组件传递数据给子组件，子组件不可直接修改
  • 类型校验：通过 props 定义数据类型（如 String, Number）
  • 默认值：可设置 props 的默认值（default 属性）

🔥 events：事件触发的机制

子组件触发事件

  • 使用 $emit 方法向父组件传递事件
  • 示例：
    // 子组件
<script>
export default {
  methods: {
    handleClick() {
      this.$emit('custom-event', { detail: '点击事件' })
    }
  }
}
</script>

父组件监听事件

  • 通过 @ 或 v-on 监听子组件事件
  • 示例：
    <template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

🔄 综合实践建议

场景 推荐方式 说明
简单数据传递 props 直接绑定数据
用户交互反馈 events 子组件触发父组件逻辑
复杂数据更新 v-model 基于 props 和 events 的双向绑定
避免过度通信 使用事件总线 通过 $bus 实现跨层级通信
props_events

需要深入理解组件通信的其他方式？可参考：组件通信全攻略 📚