在Vue开发中，组件通信就像家庭成员之间的交流，方式多种多样。今天我们就来聊聊那些既实用又接地气的解决方案，让你在开发中不再为组件间传值发愁。
一、Props和$emit：父子组件的基础对话
这就像父母给孩子零花钱（Props）和孩子告诉父母考试成绩（$emit）的关系。举个完整的例子：
// 父组件 Parent.vue
<template>
<div>
<Child :allowance="money" @score-reported="handleScore" />
<p>孩子这次考了：{{ childScore }}分</p>
</div>
</template>
<script>
export default {
data() {
return {
money: 100, // 给孩子的零花钱
childScore: 0 // 记录孩子的成绩
}
},
methods: {
handleScore(score) {
this.childScore = score
}
}
}
</script>
// 子组件 Child.vue
<template>
<div>
<p>爸爸给了我{{ allowance }}元零花钱</p>
<button @click="reportScore(95)">告诉爸爸考试成绩</button>
</div>
</template>
<script>
export default {
props: {
allowance: {
type: Number,
required: true
}
},
methods: {
reportScore(score) {
this.$emit('score-reported', score) // 向父组件报告成绩
}
}
}
</script>
这种方式的优点是简单直接，适合简单的父子组件通信。但缺点是当组件层级较深时，需要一层层传递，比较麻烦。
二、Event Bus：全家人的微信群聊
Event Bus就像建立一个家庭微信群，谁有事就在群里喊一声。我们创建一个单独的eventBus.js文件：
// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()
// 组件A - 发送消息
<script>
import { EventBus } from './eventBus'
export default {
methods: {
sendMessage() {
EventBus.$emit('family-message', '今晚不回家吃饭')
}
}
}
</script>
// 组件B - 接收消息
<script>
import { EventBus } from './eventBus'
export default {
created() {
EventBus.$on('family-message', (message) => {
console.log('收到消息：', message)
})
},
beforeDestroy() {
// 记得取消监听，避免内存泄漏
EventBus.$off('family-message')
}
}
</script>
Event Bus适合任意组件间的通信，特别是没有直接关系的组件。但要注意及时清理事件监听，否则可能导致内存泄漏。
三、Vuex：家庭会议记录本
当应用变得复杂时，Vuex就像是一个家庭会议记录本，所有重要信息都记录在里面。来看个完整的购物车示例：
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
cartItems: [] // 购物车商品
},
mutations: {
ADD_TO_CART(state, product) {
state.cartItems.push(product)
},
REMOVE_FROM_CART(state, index) {
state.cartItems.splice(index, 1)
}
},
actions: {
addToCart({ commit }, product) {
commit('ADD_TO_CART', product)
},
removeFromCart({ commit }, index) {
commit('REMOVE_FROM_CART', index)
}
},
getters: {
cartTotal: state => {
return state.cartItems.reduce((total, item) => total + item.price, 0)
}
}
})
// 商品组件 Product.vue
<script>
export default {
methods: {
addToCart() {
this.$store.dispatch('addToCart', {
name: 'iPhone 13',
price: 5999
})
}
}
}
</script>
// 购物车组件 Cart.vue
<template>
<div>
<div v-for="(item, index) in cartItems" :key="index">
{{ item.name }} - {{ item.price }}元
<button @click="removeItem(index)">删除</button>
</div>
<p>总价：{{ cartTotal }}元</p>
</div>
</template>
<script>
export default {
computed: {
cartItems() {
return this.$store.state.cartItems
},
cartTotal() {
return this.$store.getters.cartTotal
}
},
methods: {
removeItem(index) {
this.$store.dispatch('removeFromCart', index)
}
}
}
</script>
Vuex适合中大型应用，可以集中管理状态。但小型项目使用可能会显得过于复杂。
四、provide/inject：家族遗传特性
这就像家族遗传的特性，祖先组件提供，后代组件直接获取。来看个主题设置的例子：
// 祖先组件 App.vue
<script>
export default {
provide() {
return {
theme: 'dark' // 提供主题设置
}
}
}
</script>
// 后代组件 Button.vue
<script>
export default {
inject: ['theme'], // 注入主题
created() {
console.log('当前主题：', this.theme) // 输出：dark
}
}
</script>
provide/inject适合深层嵌套组件间的通信，但要注意数据不是响应式的（除非提供的是一个响应式对象）。
五、$refs：直接叫孩子的小名
有时候我们想直接操作子组件，就像直接叫孩子的小名让他过来：
// 父组件
<template>
<div>
<Child ref="myChild" />
<button @click="callChild">叫孩子</button>
</div>
</template>
<script>
export default {
methods: {
callChild() {
this.$refs.myChild.sayHello() // 直接调用子组件方法
}
}
}
</script>
// 子组件 Child.vue
<script>
export default {
methods: {
sayHello() {
console.log('爸爸叫我啦！')
}
}
}
</script>
这种方式简单直接，但过度使用会导致组件耦合度过高，不利于维护。
六、总结与选型建议
- 简单父子通信：优先使用Props和$emit
- 非父子组件：小型项目用Event Bus，中大型用Vuex
- 深层嵌套组件：考虑provide/inject
- 需要直接操作子组件：谨慎使用$refs
在实际项目中，往往需要多种方式配合使用。关键是根据项目规模和组件关系，选择最合适的通信方式。记住，没有最好的方案，只有最适合的方案。
评论