Vue 3 常见的通信方式

在 Vue 3 中，组件通信方式更丰富、语法更现代化，旧的方式也有一些优化或替代。下面是 Vue 3 常见的通信方式，按使用场景来整理：

---

✅ 一、父子组件通信

1. props（父传子）

<!-- 父组件 -->
<Child :msg="msgFromParent" /><!-- 子组件 -->
defineProps(['msg'])

2. $emit（子传父）

<!-- 子组件 -->
const emit = defineEmits(['update'])
emit('update', value)<!-- 父组件 -->
<Child @update="handleUpdate" />

---

✅ 二、兄弟组件通信（非父子）

3. 使用第三方事件总线（推荐 mitt）

npm install mitt

// eventBus.ts
import mitt from 'mitt'
export const emitter = mitt()

// A组件发送
emitter.emit('eventName', data)// B组件接收
emitter.on('eventName', (data) => { ... })

---

✅ 三、跨层级通信

4. provide / inject

适合祖先 -> 任意后代组件传值

// 父组件
provide('theme', 'dark')// 子组件
const theme = inject('theme')

---

✅ 四、全局状态管理（跨组件、跨页面通信）

5. 使用 Pinia（官方推荐，Vuex 5 已转型）

npm install pinia

// store/counter.ts
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {state: () => ({ count: 0 }),actions: { increment() { this.count++ } },
})

// 在组件中
const counter = useCounterStore()
counter.increment()

---

✅ 五、ref & expose（父调子组件的方法）

6. ref + defineExpose

<!-- 子组件 -->
<script setup>
function sayHello() { console.log('hello') }
defineExpose({ sayHello })
</script><!-- 父组件 -->
<Child ref="childRef" />
<script setup>
const childRef = ref()
onMounted(() => {childRef.value.sayHello()
})
</script>

---

✅ 六、路由参数传值

7. 使用 vue-router 的 params 或 query

// 传值
router.push({ name: 'User', params: { id: 123 } })
router.push({ path: '/user', query: { id: 123 } })// 接收
const route = useRoute()
console.log(route.params.id)
console.log(route.query.id)

---

✅ 七、LocalStorage / SessionStorage（跨页面通信）

虽然不是组件通信的正统方式，但用于跨页保留状态还是常见：

localStorage.setItem('token', 'xxx')
const token = localStorage.getItem('token')