组件通信 数据传递 vue父组件和子组件、Vue组件联动实现方法与实用技巧

核心关键词

1. Props（父传子）

   • 父组件通过属性向子组件传递数据
   • 子组件用 props 接收，支持类型校验与默认值

2. $emit（子传父）

   • 子组件通过 this.$emit('事件名', 数据) 触发父组件监听的自定义事件

3. v-model 双向绑定

   

   • 语法糖：v-model = :value + @input
   • 支持自定义组件的 model 选项

4. $refs 访问子组件

   • 父组件通过 this.$refs.子组件名 直接调用子组件方法或数据

5. Provide/Inject（跨层级传递）

   • 祖先组件用 provide 提供数据，后代组件用 inject 注入

6. Event Bus（事件总线）

   • 创建全局空Vue实例（const bus = new Vue()）
   • 组件间通过 bus.$on 监听、bus.$emit 触发事件

7. Vuex/Pinia（状态管理）

   

   集中式状态管理,适合复杂应用的多组件共享数据

8. $attrs 与 $listeners

   • $attrs：接收父组件未在 props 中声明的属性
   • $listeners：透传父组件的所有事件监听器

9. 插槽通信（Scoped Slots）

   • 子组件通过 <slot :data="子组件数据"> 向父组件暴露数据

实用技巧

• Props 验证：使用 validator 函数自定义校验逻辑
• 异步更新优化：结合 nextTick 确保DOM更新后操作
• 深层响应式：对复杂对象使用 Vue.set 或展开运算符保证响应性
• 性能注意：避免频繁使用 Event Bus，大型项目优先选 Vuex/Pinia
  基于Vue 2.x/3.x通用实践，部分API需根据版本调整）