Vue 组件通信笔记

1. 常见问题

  • 父子通信
  • 兄弟组件通信
  • 跨层级通信
  • 全局状态管理

2. 解决策略

  1. 父子组件通信
  • props / $emit
  1. 兄弟组件通信
  • 使用事件总线（mitt 或 Vuex）
  1. 跨层级通信
  • provide / inject
    1
    2
    3
    4
    5
    // 父组件
    provide('msg', 'hello');

    // 子组件
    const msg = inject('msg');
  1. 全局状态管理
  • Vuex / Pinia
    1
    2
    // store.state.count
    // store.commit('increment')