Vue2 组件通信全解析：8种场景与实战指南

前言：

在 Vue 开发中，组件化是核心思想之一，而组件之间的通信则是构建复杂应用的关键

一、为什么需要组件通信？

Vue 通过组件化将 UI 拆分为独立的模块，但实际业务中，组件之间往往需要共享数据或触发行为。比如：

• 父子组件：表单组件向父级提交数据。
• 兄弟组件：侧边栏和主内容区域的状态联动。
• 跨级组件：全局主题样式的动态切换。

不同的场景需要不同的通信方式，接下来我们逐一拆解。

二、核心通信方式详解

1. 父子组件通信

1.1 父传子：props

适用场景：父组件向子组件传递静态或动态数据。

代码示例：

<!-- 父组件 -->
<template>
  <ChildComponent :message="parentMsg" />
</template>

<script>
export default {
  data() {
    return { parentMsg: "Hello from Parent!" }
  }
}
</script>

<!-- 子组件 -->
<script>
export default {
  props: ['message'], // 接收数据
  mounted() {
    console.log(this.message); // 输出：Hello from Parent!
  }
}
</script>

1.2 子传父：$emit

适用场景：子组件触发事件，父组件监听并处理。

代码示例：

<!-- 子组件 -->
<template>
  <button @click="sendData">点击传值</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('child-event', { data: 'Hello Parent!' })
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <ChildComponent @child-event="handleChildEvent" />
</template>

<script>
export default {
  methods: {
    handleChildEvent(payload) {
      console.log(payload.data); // 输出：Hello Parent!
    }
  }
}
</script>

2. 兄弟组件通信

2.1 事件总线（Event Bus）

适用场景：非父子组件间的通信，如兄弟组件或跨级组件。

实现步骤：

1. 创建事件总线：

   // event-bus.js
   import Vue from 'vue';
   export const EventBus = new Vue();
   

2. 组件 A 发送事件：

   import { EventBus } from './event-bus.js';
   export default {
     methods: {
       sendMessage() {
         EventBus.$emit('message', 'Hello from A!');
       }
     }
   }
   

3. 组件 B 接收事件：

   import { EventBus } from './event-bus.js';
   export default {
     created() {
       EventBus.$on('message', (msg) => {
         console.log(msg); // 输出：Hello from A!
       });
     },
     beforeDestroy() {
       EventBus.$off('message'); // 必须清理监听！
     }
   }
   

3. 跨层级组件通信

3.1 provide 和 inject

适用场景：祖先组件向后代组件注入数据（如全局配置）。

代码示例：

// 祖先组件
export default {
  provide() {
    return { theme: 'dark' };
  }
}

// 后代组件
export default {
  inject: ['theme'],
  mounted() {
    console.log(this.theme); // 输出：dark
  }
}

3.2 $attrs 和 $listeners

适用场景：透传属性和事件到深层子组件（适合高阶组件）。

代码示例：

<!-- 父组件 -->
<ChildComponent :title="title" @click="handleClick" />

<!-- 中间组件 -->
<GrandChildComponent v-bind="$attrs" v-on="$listeners" />

<!-- 孙子组件 -->
<script>
export default {
  props: ['title'],
  methods: {
    triggerClick() {
      this.$emit('click', 'Event triggered!');
    }
  }
}
</script>

4. 直接访问组件实例

4.1 $refs

适用场景：父组件直接调用子组件方法（谨慎使用）。

代码示例：

<!-- 父组件 -->
<template>
  <ChildComponent ref="childRef" />
  <button @click="callChildMethod">调用子组件方法</button>
</template>

<script>
export default {
  methods: {
    callChildMethod() {
      this.$refs.childRef.childMethod();
    }
  }
}
</script>

<!-- 子组件 -->
<script>
export default {
  methods: {
    childMethod() {
      console.log('子组件方法被调用');
    }
  }
}
</script>

5. 全局状态管理（Vuex）

适用场景：复杂应用中的跨组件状态共享。

核心概念：

• State: 存储全局状态。
• Mutations: 同步修改状态。
• Actions: 异步操作后提交 Mutation。

代码示例：

// store.js
export default new Vuex.Store({
  state: { count: 0 },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => commit('increment'), 1000);
    }
  }
});

// 组件中使用
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    }
  }
}

三、其他实用技巧

1. v-model 实现双向绑定

代码示例：

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

<!-- 子组件 -->
<script>
export default {
  props: ['value'],
  methods: {
    updateValue(newVal) {
      this.$emit('input', newVal);
    }
  }
}
</script>

2. .sync 修饰符

代码示例：

<!-- 父组件 -->
<ChildComponent :title.sync="pageTitle" />

<!-- 子组件 -->
<script>
export default {
  props: ['title'],
  methods: {
    changeTitle() {
      this.$emit('update:title', 'New Title');
    }
  }
}
</script>

四、对比与总结

五、使用建议

1. 优先使用 props 和 $emit：简单场景避免过度设计。
2. 谨慎使用 $refs 和 $parent：过度依赖会导致组件耦合。
3. 及时清理事件监听：防止内存泄漏（尤其在 SPA 中）。
4. 合理选择 Vuex：小型项目可用 Event Bus 替代。