组件通信（props/$emit）

父子组件通信是 Vue 组件开发的核心。

Props 传递数据

父组件

vue

<template>
  <ChildComponent :title="pageTitle" :count="5" />
</template>

子组件接收

JavaScript

export default {
  props: {
    title: String,
    count: {
      type: Number,
      default: 0,
      required: true
    }
  }
}

Props 验证

JavaScript

props: {
  name: {
    type: String,
    required: true
  },
  age: {
    type: Number,
    validator: (value) => value >= 0 && value <= 150
  },
  status: {
    type: String,
    validator: (value) => ['active', 'inactive'].includes(value)
  }
}

$emit 触发事件

子组件

vue

<template>
  <button @click="$emit('update', newValue)">更新</button>
</template>

<script>
export default {
  emits: ['update']
}
</script>

父组件监听

vue

<ChildComponent @update="handleUpdate" />

双向绑定

JavaScript

// 子组件
export default {
  props: ['modelValue'],
  emits: ['update:modelValue']
}

vue

<!-- 父组件 -->
<ChildComponent v-model="parentValue" />

Props 是单向数据流，子组件不应直接修改 props。

要点总结

Props 用于父传子，支持类型验证和默认值
$emit 用于子传父，触发事件
v-model 是 props + emit 的语法糖
Props 单向流动，不可直接修改