Vue组件通信

下面，我们来系统的梳理关于 **Vue 组件通信基础 ** 的基本知识点：

---

一、组件通信核心思想

Vue 组件通信的核心目标是实现 数据共享 和 行为协调。根据组件层级关系，主要分为以下场景：

• 父子组件：Props / 自定义事件
• 兄弟组件：共同父级 / 全局事件总线 / 状态管理
• 跨层级组件：Provide/Inject / 状态管理
• 任意组件：全局状态管理（Vuex/Pinia）

---

二、基础通信方式

1. Props（父 → 子）

作用：父组件向子组件传递数据
实现：

<!-- 父组件 -->
<Child :title="pageTitle" :items="list" /><!-- 子组件 -->
<script>
export default {props: {title: {  // 详细配置type: String,required: true,validator: (v) => v.length > 0},items: {  // 默认值配置type: Array,default: () => []}}
}
</script>

注意事项：

• 遵循单向数据流，子组件不能直接修改 props
• 复杂对象使用 default: () => ({}) 避免共享引用
• Vue3 中使用 defineProps 编译器宏（无需导入）

---

2. 自定义事件（子 → 父）

作用：子组件向父组件传递数据
实现：

<!-- 子组件 -->
<button @click="$emit('confirm', data)">提交</button><!-- 父组件 -->
<Child @confirm="handleConfirm" />

进阶用法：

• Vue3 需要显式声明 emits（类型校验）：

  emits: {confirm: (payload) => { return typeof payload === 'object'  // 校验函数}
  }
  

• 使用 defineEmits（组合式 API）：

  const emit = defineEmits(['confirm'])
  emit('confirm'