Vue3组件通信全攻略：8种传值方式详解

前言

在Vue3开发中，组件通信是构建复杂应用的核心技能。本文将全面讲解Vue3支持的8种组件传值方式，助你轻松应对各种场景！

一、Props父传子

适用场景：父组件向直接子组件传递数据

<!-- 父组件 -->
<template><Child :title="parentTitle" />
</template><script setup>
import Child from './Child.vue'
const parentTitle = "来自父组件的消息"
</script><!-- 子组件Child.vue -->
<template><h2>{{ title }}</h2>
</template><script setup>
// Options API写法
// export default {
//   props: ['title']
// }// Composition API写法
const props = defineProps({title: {type: String,default: '默认标题'}
})
</script>

二、自定义事件子传父

适用场景：子组件向父组件传递数据

<!-- 子组件 -->
<template><button @click="sendMessage">发送消息</button>
</template><script setup>
const emit = defineEmits(['message-sent'])const sendMessage = () => {emit('message-sent', '子组件的数据')
}
</script><!-- 父组件 -->
<template><Child @message-sent="handleMessage" />
</template><script setup>
const handleMessage = (msg) => {console.log(msg) // 输出：子组件的数据
}
</script>

三、v-model双向绑定

Vue3新特性：支持多个v-model绑定

<!-- 父组件 -->
<template><Child v-model:title="pageTitle" v-model:content="pageContent" />
</template><!-- 子组件 -->
<template><input :value="title"@input="$emit('update:title', $event.target.value)"><textarea:value="content"@input="$emit('update:content', $event.target.value)">
</template><script setup>
defineProps(['title', 'content'])
defineEmits(['update:title', 'update:content'])
</script>

四、Ref获取组件实例

适用场景：父组件直接调用子组件方法

<!-- 父组件 -->
<template><Child ref="childRef" /><button @click="callChildMethod">调用子组件</button>
</template><script setup>
import { ref } from 'vue'
const childRef = ref(null)const callChildMethod = () => {childRef.value.childMethod()
}
</script><!-- 子组件 -->
<script setup>
const childMethod = () => {console.log('子组件方法被调用')
}// 需暴露方法给父组件
defineExpose({childMethod
})
</script>

五、Provide/Inject依赖注入

适用场景：跨层级组件通信

<!-- 祖先组件 -->
<script setup>
import { provide } from 'vue'provide('globalColor', 'red')
</script><!-- 任意后代组件 -->
<script setup>
import { inject } from 'vue'const color = inject('globalColor', 'blue') // 默认值blue
</script>

六、事件总线（Event Bus）

Vue3实现方式：需借助第三方库（推荐mitt）

javascript">// eventBus.js
import mitt from 'mitt'
export const emitter = mitt()// 组件A发送事件
emitter.emit('custom-event', data)// 组件B监听事件
emitter.on('custom-event', (data) => {// 处理数据
})

七、Pinia状态管理

推荐方案：Vue官方新一代状态管理工具

javascript">// store/counter.js
export const useCounterStore = defineStore('counter', {state: () => ({ count: 0 }),actions: {increment() {this.count++}}
})// 组件中使用
import { useCounterStore } from './store/counter'
const counter = useCounterStore()
console.log(counter.count) // 0
counter.increment()

八、LocalStorage/SessionStorage

适用场景：持久化数据存储

javascript">// 存储
localStorage.setItem('user', JSON.stringify(userData))// 读取
const user = JSON.parse(localStorage.getItem('user'))

方法对比

方式	适用场景	数据流向	复杂度
Props	父子组件	父→子	★☆☆
自定义事件	父子组件	子→父	★☆☆
v-model	父子双向绑定	双向	★★☆
Provide/Inject	跨层级组件	祖先→后代	★★☆
Pinia	复杂应用/多组件共享状态	任意方向	★★★
事件总线	任意组件（简单场景）	任意方向	★★☆