当前位置：首页 > news >正文

Vue组件之间通信

news 2025/7/22 13:05:20

一、组件自定义事件：子传父通信方案

1. 基本使用方式

1.1 直接绑定方式（推荐）

<!-- 父组件 Parent.vue -->
<template><Child @custom-event="handleEvent" />
</template><script>
import Child from './Child.vue'export default {components: { Child },methods: {handleEvent(payload) {console.log('收到子组件数据:', payload)}}
}
</script><!-- 子组件 Child.vue -->
<template><button @click="sendData">传递数据</button>
</template><script>
export default {methods: {sendData() {this.$emit('custom-event', {data: '子组件数据'})}}
}
</script>

1.2 通过ref绑定方式

<!-- 父组件 Parent.vue -->
<template><Child ref="childRef" />
</template><script>
import Child from './Child.vue'export default {components: { Child },mounted() {this.$refs.childRef.$on('custom-event', this.handleEvent)},beforeDestroy() {this.$refs.childRef.$off('custom-event')},methods: {handleEvent(payload) {console.log('收到子组件数据:', payload)}}
}
</script>

2. 关键特性解析

一次性事件：使用once修饰符或$once方法

<Child @custom-event.once="handleEvent" />
<!-- 或 -->
mounted() {this.$refs.childRef.$once('custom-event', this.handleEvent)
}

事件解绑：

// 解绑单个事件
this.$off('custom-event')
// 解绑多个事件
this.$off(['event1', 'event2'])
// 解绑所有事件
this.$off()

3. 原生事件绑定：

<Child @click.native="handleClick" />

this指向问题：

* 使用methods方法或箭头函数：this指向父组件实例

* 使用普通函数：this指向子组件实例

二、全局事件总线：任意组件通信方案

1. 初始化配置

// main.js
new Vue({beforeCreate() {Vue.prototype.$bus = this // 安装全局事件总线},render: h => h(App)
}).$mount('#app')

2. 实际应用案例

// 组件A（接收数据）
export default {mounted() {this.$bus.$on('data-event', this.handleData)},beforeDestroy() {this.$bus.$off('data-event')},methods: {handleData(payload) {console.log('接收数据:', payload)}}
}// 组件B（发送数据）
export default {methods: {sendData() {this.$bus.$emit('data-event', {message: '跨组件数据'})}}
}

3. 使用建议

事件命名：使用命名空间避免冲突（如user:updated）
及时解绑：在beforeDestroy钩子中解绑事件
适度使用：复杂场景考虑Vuex/Pinia状态管理

三、消息订阅与发布：第三方解决方案

1. 基本使用流程

// 安装
npm install pubsub-js

// 组件A（订阅消息）
import pubsub from 'pubsub-js'export default {mounted() {this.pubId = pubsub.subscribe('data-channel', (msgName, data) => {console.log('收到消息:', data)})},beforeDestroy() {pubsub.unsubscribe(this.pubId)}
}// 组件B（发布消息）
import pubsub from 'pubsub-js'export default {methods: {publishData() {pubsub.publish('data-channel', {info: '跨组件消息'})}}
}

2. 与全局事件总线对比

特性	全局事件总线	消息订阅发布
实现方式	Vue原生实现	第三方库实现
体积	无额外体积	需要引入pubsub-js
调试支持	可通过Vue开发者工具查看	需要额外调试工具
类型支持	有限	更好
取消订阅	需要手动维护	提供订阅ID管理
适合场景	简单项目	复杂或大型项目

四、nextTick：DOM更新后的回调机制

1. 核心用法示例

<template><div ref="content">{{ message }}</div><button @click="updateMessage">更新</button>
</template><script>
export default {data() {return {message: '初始消息'}},methods: {updateMessage() {this.message = '更新后的消息'// 此时DOM尚未更新console.log(this.$refs.content.textContent) // '初始消息'this.$nextTick(() => {// DOM已更新console.log(this.$refs.content.textContent) // '更新后的消息'})}}
}
</script>

2. 典型应用场景

操作更新后的DOM：

this.someData = newValue
this.$nextTick(() => {this.$refs.element.doSomething()
})

2. 等待视图更新后执行计算：

this.items.push(newItem)
this.$nextTick(() => {this.calculateLayout()
})

3. 与第三方库集成：

this.showModal = true
this.$nextTick(() => {$(this.$refs.modal).modal('show')
})

3. 实现原理说明

Vue的DOM更新是异步执行的，数据变化后：

Vue开启一个队列缓冲同一事件循环中的数据变更
下一个事件循环"tick"中刷新队列并执行实际工作
nextTick将回调延迟到下次DOM更新循环之后执行

五、技术使用建议

通信场景	推荐方案	理由
父子组件通信	自定义事件/props	Vue原生支持，简单直接
兄弟组件通信	全局事件总线/状态管理	避免复杂的组件层级传递
跨多级组件通信	状态管理/Provide/Inject	避免逐层传递的繁琐
非父子关系组件通信（简单场景）	全局事件总线	轻量级解决方案
非父子关系组件通信（复杂场景）	状态管理	集中式状态管理更易维护
需要等待DOM更新的操作	nextTick	确保在正确时机操作DOM
需要与第三方库集成的发布订阅需求	pubsub-js	功能更强大，支持更复杂的消息传递场景