Vue3组件通信方法清单

1. Props / Emits（父子通信）​​

​​适用场景​​

父组件传递数据给子组件，子组件通知父组件。

​​代码示例​

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

<script setup>
import { ref } from 'vue';
import ChildComponent from './Child.vue';

const parentMsg = ref('Hello from Parent');
const handleUpdate = (newMsg) => {
  parentMsg.value = newMsg;
};
</script>

<!-- 子组件 Child.vue -->
<template>
  <button @click="$emit('update', 'New message')">
    点击更新: {{ message }}
  </button>
</template>

<script setup>
defineProps(['message']);
defineEmits(['update']);
</script>

2. v-model（双向绑定）​​

​​适用场景​​

简化父子组件的双向数据绑定。

​​代码示例

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

<script setup>
import { ref } from 'vue';
const inputValue = ref('');
</script>

<!-- 子组件 CustomInput.vue -->
<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script setup>
defineProps(['modelValue']);
defineEmits(['update:modelValue']);
</script>

3. provide / inject（跨层级通信）​​

​​适用场景​​

祖先组件向后代组件传递数据，避免逐层传递 props。

​​代码示例​

<!-- 祖先组件 -->
<template>
  <MiddleComponent />
</template>

<script setup>
import { provide, ref } from 'vue';
const theme = ref('dark');
provide('theme', theme); // 提供数据
</script>

<!-- 后代组件（任意层级） -->
<script setup>
import { inject } from 'vue';
const theme = inject('theme'); // 注入数据
</script>

4. 事件总线（任意组件通信）​​

​​适用场景​​

非父子组件间的通信，如兄弟组件或跨多层级组件。

​​代码示例（使用 mitt）

// 创建事件总线（utils/eventBus.js）
import mitt from 'mitt';
export const emitter = mitt();

// 组件A（发送事件）
import { emitter } from './eventBus';
emitter.emit('message', 'Hello from A');

// 组件B（接收事件）
import { emitter } from './eventBus';
emitter.on('message', (msg) => {
  console.log(msg); // "Hello from A"
});

5. ref / 模板引用​​

​​适用场景​​

父组件直接调用子组件的方法或访问其数据。

​​代码示例​

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

<script setup>
import { ref } from 'vue';
const childRef = ref(null);

const callChildMethod = () => {
  childRef.value.sayHello(); // 直接调用子组件方法
};
</script>

<!-- 子组件 -->
<script setup>
const sayHello = () => {
  console.log('Hello from Child!');
};
// 暴露方法给父组件
defineExpose({ sayHello });
</script>

6. Pinia（全局状态管理）​​

​​适用场景​​

多个组件共享复杂状态（如用户登录信息）。

​​代码示例​

// 定义 store
import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
  state: () => ({ name: 'Alice' }),
  actions: {
    updateName(newName) {
      this.name = newName;
    }
  }
});

// 组件中使用
import { useUserStore } from '@/store/user';
const userStore = useUserStore();
console.log(userStore.name); // "Alice"
userStore.updateName('Bob'); // 调用 action

7. 插槽（Slot）通信​​

​​适用场景​​

父组件向子组件传递模板片段。

​​代码示例

<!-- 子组件 -->
<template>
  <div class="card">
    <slot name="header" :user="user"></slot>
    <slot></slot>
  </div>
</template>

<script setup>
const user = { name: 'Alice' };
</script>

<!-- 父组件 -->
<template>
  <ChildComponent>
    <template #header="{ user }">
      <h1>{{ user.name }}的头像</h1>
    </template>
    <p>这是默认插槽内容</p>
  </ChildComponent>
</template>

8. Local Storage / Cookies​​

​​适用场景​​

持久化存储数据，跨页面共享。

注意，只有同源的页面才能共享localstorage的数据

​​代码示例​

// 存储数据
localStorage.setItem('theme', 'dark');

// 读取数据（任何组件中均可）
const theme = localStorage.getItem('theme');

总结：如何选择？​​