Vue 组件通信的 12 种解决方案

目录

1. ‌Props（父传子）‌

2. ‌$emit（子传父）‌

3. ‌.sync 修饰符（双向绑定）‌

4. ‌Provide / Inject（祖孙组件通信）‌

5. ‌EventBus（兄弟/跨组件通信）‌

6. ‌Pinia / Vuex（全局状态管理）‌

7. ‌parent/parent/children / $refs（直接访问）‌

8. ‌attrs/attrs/listeners（跨代通信）‌

9. ‌v-model（双向绑定）‌

10. ‌$root（访问根实例）‌

11. ‌ref（访问子组件）‌

12. ‌mitt（事件总线）‌

1. ‌Props（父传子）‌

• ‌优点‌：简单直接，符合单向数据流原则，易于理解和维护。
• ‌缺点‌：层级过深时，传递数据会变得复杂。
• ‌使用实例‌：

<!-- 父组件 --> <child-component :user="currentUser" /> <!-- 子组件 --> <script> export default { props: { user: { type: Object, required: true } } } </script>

2. ‌$emit（子传父）‌

• ‌优点‌：用于子组件向父组件传递数据，使用简单，非常常见。
• ‌缺点‌：如果层级过深，需层层传递，容易造成代码冗余。
• ‌使用实例‌：

<!-- 子组件 --> <script> export default { methods: { handleClick() { this.$emit('user-updated', { name: '新名字' }); } } } </script> <!-- 父组件 --> <child-component @user-updated="handleUpdate" />

3. ‌.sync 修饰符（双向绑定）‌

• ‌优点‌：简化了双向绑定的写法，看起来更简洁。
• ‌缺点‌：Vue 3 中已被废弃，不推荐使用。
• ‌使用实例‌

<!-- 父组件 --> <child-component :name.sync="userName" /> <!-- 子组件 --> <script> export default { props: ['name'], methods: { updateName() { this.$emit('update:name', '新名字'); } } } </script>

4. ‌Provide / Inject（祖孙组件通信）‌

• ‌优点‌：适用于跨层级组件通信，无需逐层传递 props。
• ‌缺点‌：非响应式，不适用于复杂状态管理。
• ‌使用实例‌：

<!-- 父组件 --> <script> export default { provide() { return { user: this.currentUser }; } } </script> <!-- 子组件 --> <script> export default { inject: ['user'] } </script>

5. ‌EventBus（兄弟/跨组件通信）‌

• ‌优点‌：适用于任意组件间通信，使用简单。
• ‌缺点‌：难以维护，容易造成内存泄漏，不推荐在大型项目中使用。
• ‌使用实例‌：

// eventBus.js import Vue from 'vue'; export default new Vue(); // 组件A EventBus.$emit('update-user', data); // 组件B EventBus.$on('update-user', (data) => { ... });

6. ‌Pinia / Vuex（全局状态管理）‌

• ‌优点‌：适合管理全局状态，便于维护和调试。
• ‌缺点‌：对于简单通信可能显得“重量级”。
• ‌使用实例‌：

// store.js import { defineStore } from 'pinia'; export const useUserStore = defineStore('user', { state: () => ({ name: '' }), actions: { updateName(name) { this.name = name; } } }); // 组件中使用 const store = useUserStore(); store.updateName('张三');

7. ‌parent/parent/children / $refs（直接访问）‌

• ‌优点‌：直接访问组件实例，适合操作子组件方法或数据。
• ‌缺点‌：破坏组件封装性，不易维护。
• ‌使用实例‌：

<!-- 父组件 --> <child-component ref="childRef" /> <!-- 访问子组件 --> this.$refs.childRef.someMethod();

8. ‌attrs/attrs/listeners（跨代通信）‌

• ‌优点‌：适合跨层级传递 props 和事件。
• ‌缺点‌：需配合inheritAttrs: false使用。
• ‌使用实例‌：

<!-- 父组件 --> <child-component :title="title" @click="handleClick" /> <!-- 子组件 --> <grand-child v-bind="$attrs" v-on="$listeners" />

9. ‌v-model（双向绑定）‌

• ‌优点‌：简化了父子组件的双向数据绑定。
• ‌缺点‌：需配合defineProps和defineEmits使用（Vue 3）。
• ‌使用实例‌：

<!-- 父组件 --> <child-component v-model="message" /> <!-- 子组件 --> <script setup> const props = defineProps(['modelValue']); const emit = defineEmits(['update:modelValue']); const updateMessage = () => { emit('update:modelValue', '新消息'); }; </script>

10. ‌$root（访问根实例）‌

• ‌优点‌：可以访问根组件实例，适合全局状态访问。
• ‌缺点‌：容易导致代码耦合，不推荐滥用。
• ‌使用实例‌：

<!-- 子组件 --> this.$root.someGlobalData = '数据';

11. ‌ref（访问子组件）‌

• ‌优点‌：直接访问子组件实例，适合调用子组件方法。
• ‌缺点‌：破坏组件封装性。
• ‌使用实例‌：

<!-- 父组件 --> <child-component ref="child" /> <!-- 调用子组件方法 --> this.$refs.child.someMethod();

12. ‌mitt（事件总线）‌

• ‌优点‌：适用于任意组件通信，可替代 EventBus。
• ‌缺点‌：需手动管理事件监听，防止内存泄漏。
• ‌使用实例‌：

// mitt.js import mitt from 'mitt'; const emitter = mitt(); export default emitter; // 组件A emitter.emit('update-user', data); // 组件B emitter.on('update-user', (data) => { ... });