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-routerparamsquery

复制代码
// 传值
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')
相关推荐
Cory.眼14 分钟前
WebRTC入门指南:实时通信零基础
javascript·webrtc·实时通信
前端架构师-老李37 分钟前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
拖拉斯旋风1 小时前
📚 JavaScript 变量声明三剑客:`var`、`let`、`const` 学习笔记
javascript
可触的未来,发芽的智生3 小时前
追根索源:换不同的词嵌入(词向量生成方式不同,但词与词关系接近),会出现什么结果?
javascript·人工智能·python·神经网络·自然语言处理
努力写代码的熊大3 小时前
stack、queue与priority_queue的用法解析与模拟实现
java·前端·javascript
im_AMBER3 小时前
React 06
前端·javascript·笔记·学习·react.js·前端框架
m0_748233644 小时前
C++开发中的常用设计模式:深入解析与应用场景
javascript·c++·设计模式
fruge4 小时前
TypeScript 基础类型与接口详解
javascript·ubuntu·typescript
AAA阿giao5 小时前
JavaScript 中的变量声明:var、let 与 const 深度解析
javascript·笔记
Mintopia5 小时前
🌐 数据合规框架下的 WebAIGC 训练数据处理技术规范
前端·javascript·aigc