目录
[1. Props（父传子）](#1. Props（父传子）)
[2. emit（子传父）](#2. emit（子传父）)
[3. .sync 修饰符（双向绑定）](#3. .sync 修饰符（双向绑定）)
[4. Provide / Inject（祖孙组件通信）](#4. Provide / Inject（祖孙组件通信）)
[5. EventBus（兄弟/跨组件通信）](#5. EventBus（兄弟/跨组件通信）)
[6. Pinia / Vuex（全局状态管理）](#6. Pinia / Vuex（全局状态管理）)
[7. parent/parent/children / refs（直接访问）](#7. parent/parent/children / refs（直接访问）)
[8. attrs/attrs/listeners（跨代通信）](#8. attrs/attrs/listeners（跨代通信）)
[9. v-model（双向绑定）](#9. v-model（双向绑定）)
[10. root（访问根实例）](#10. root（访问根实例）)
[11. ref（访问子组件）](#11. ref（访问子组件）)
[12. mitt（事件总线）](#12. mitt（事件总线）)
1. **Props（父传子）**
-
优点：简单直接，符合单向数据流原则，易于理解和维护。
-
缺点：层级过深时，传递数据会变得复杂。
-
使用实例：
2. **$emit（子传父）**
-
优点：用于子组件向父组件传递数据，使用简单，非常常见。
-
缺点：如果层级过深，需层层传递，容易造成代码冗余。
-
使用实例：
<child-component @user-updated="handleUpdate" />
3. **.sync 修饰符（双向绑定）**
-
优点：简化了双向绑定的写法，看起来更简洁。
-
缺点：Vue 3 中已被废弃，不推荐使用。
-
使用实例
4. **Provide / Inject（祖孙组件通信）**
-
优点：适用于跨层级组件通信，无需逐层传递 props。
-
缺点：非响应式，不适用于复杂状态管理。
-
使用实例：
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（直接访问）**
-
优点：直接访问组件实例，适合操作子组件方法或数据。
-
缺点：破坏组件封装性，不易维护。
-
使用实例：
this.$refs.childRef.someMethod();
8. **attrs/attrs/listeners（跨代通信）**
-
优点：适合跨层级传递 props 和事件。
-
缺点 ：需配合
inheritAttrs: false使用。 -
使用实例：
<child-component :title="title" @click="handleClick" />
9. **v-model（双向绑定）**
-
优点：简化了父子组件的双向数据绑定。
-
缺点 ：需配合
defineProps和defineEmits使用（Vue 3）。 -
使用实例：
10. **$root（访问根实例）**
-
优点：可以访问根组件实例，适合全局状态访问。
-
缺点：容易导致代码耦合，不推荐滥用。
-
使用实例：
this.$root.someGlobalData = '数据';
11. **ref（访问子组件）**
-
优点：直接访问子组件实例，适合调用子组件方法。
-
缺点：破坏组件封装性。
-
使用实例：
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) => { ... });