Vue学习笔记集--父子通讯

父子通讯

在 Vue 3 中，父子组件通信的核心方式与 Vue 2 类似，但 Composition API 和

2. 子组件接收 Props

---

自定义事件向上通信（子 → 父）

1. 子组件触发事件

2. 父组件监听事件

---

v-model 双向绑定（父子数据同步）

1. Vue 3 的 v-model 改进

• 默认使用 modelValue 作为 Prop 和 update:modelValue 作为事件。
• 支持 多个 v-model 绑定（如 v-model:title）。

2. 单个 v-model 示例

3. 多个 v-model 绑定

---

Ref 访问子组件实例（父 → 子）

1. 父组件通过 Ref 获取子组件

2. 子组件暴露属性和方法

---

依赖注入（跨层级通信）

1. 父组件提供数据（Provide）

2. 子组件注入数据（Inject）

---

总结：选择通信方式

场景	推荐方式
父传子简单数据	Props
子传父触发操作	自定义事件 (emit)
父子双向绑定	v-model / 自定义修饰符
父直接调用子组件方法	ref + defineExpose
深层嵌套组件通信	provide / inject

---

注意事项

1. Props 不可变性：子组件不应直接修改 Props（Vue 会警告），需通过事件通知父组件修改。
2. Ref 暴露安全：使用 defineExpose 控制子组件暴露的内容，避免泄露内部状态。
3. 响应式数据传递：传递对象/数组时，确保使用 reactive 或 ref 保持响应性。