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

vue2两个组件间如何传递消息

news 2026/3/26 19:14:17

Vue 2 组件间传递消息有多种方式，根据组件关系和场景选择合适的方法：

1. 父子组件通信

Props / $emit（标准方式）

vue

复制

<!-- 父组件 Parent.vue --> <template> <div> <h2>父组件</h2> <Child :message="parentMsg" @child-event="handleChildEvent" /> </div> </template> <script> import Child from './Child.vue' export default { components: { Child }, data() { return { parentMsg: '来自父组件的消息' } }, methods: { handleChildEvent(data) { console.log('收到子组件消息:', data) } } } </script>

vue

复制

<!-- 子组件 Child.vue --> <template> <div> <p>收到: {{ message }}</p> <button @click="sendToParent">通知父组件</button> </div> </template> <script> export default { props: ['message'], methods: { sendToParent() { this.$emit('child-event', { msg: '子组件发来的数据', time: Date.now() }) } } } </script>

2. 兄弟组件通信

Event Bus（事件总线）

JavaScript

复制

// utils/eventBus.js import Vue from 'vue' export const eventBus = new Vue()

vue

复制

<!-- 组件 A --> <template> <button @click="sendMsg">发送给兄弟组件</button> </template> <script> import { eventBus } from '@/utils/eventBus' export default { methods: { sendMsg() { eventBus.$emit('brother-msg', { data: 'Hello Brother' }) } } } </script>

vue

复制

<!-- 组件 B --> <template> <div>收到: {{ msg }}</div> </template> <script> import { eventBus } from '@/utils/eventBus' export default { data() { return { msg: '' } }, created() { // 监听事件 eventBus.$on('brother-msg', this.handleMsg) }, beforeDestroy() { // 必须移除监听，防止内存泄漏 eventBus.$off('brother-msg', this.handleMsg) }, methods: { handleMsg(data) { this.msg = data.data } } } </script>

3. 跨层级组件通信

Provide / Inject（祖先 ↔ 后代）

vue

复制

<!-- 祖先组件 --> <template> <div> <GrandChild /> </div> </template> <script> export default { provide() { return { appConfig: this.config, getMessage: this.getMessage } }, data() { return { config: { theme: 'dark', lang: 'zh' } } }, methods: { getMessage(msg) { console.log('深层组件传来:', msg) } } } </script>

vue

复制

<!-- 深层孙组件 --> <template> <button @click="sendUp">向祖先传消息</button> </template> <script> export default { inject: ['appConfig', 'getMessage'], created() { console.log('配置:', this.appConfig) // { theme: 'dark', lang: 'zh' } }, methods: { sendUp() { this.getMessage('来自深层组件的问候') } } } </script>

4. 全局状态管理

Vuex（推荐用于复杂应用）

JavaScript

复制

// store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { message: '', count: 0 }, mutations: { SET_MESSAGE(state, msg) { state.message = msg }, INCREMENT(state) { state.count++ } }, actions: { updateMessage({ commit }, msg) { commit('SET_MESSAGE', msg) } }, getters: { getMessage: state => state.message } })

vue

复制

<!-- 组件中使用 --> <template> <div> <p>消息: {{ message }}</p> <p>计数: {{ count }}</p> <button @click="changeMsg">修改消息</button> </div> </template> <script> import { mapState, mapMutations, mapActions } from 'vuex' export default { computed: { ...mapState(['message', 'count']), // 或使用 getter msg() { return this.$store.getters.getMessage } }, methods: { ...mapMutations(['INCREMENT']), ...mapActions(['updateMessage']), changeMsg() { // 方式1: 直接 commit this.$store.commit('SET_MESSAGE', '新消息') // 方式2: dispatch action this.updateMessage('通过 action 修改') this.INCREMENT() } } } </script>

5. $refs 直接调用（慎用）

vue

复制

<template> <Child ref="childRef" /> </template> <script> export default { methods: { callChildMethod() { // 直接调用子组件方法 this.$refs.childRef.doSomething('父组件传来的数据') } } } </script>

选择指南

表格

场景	推荐方案	说明
父子组件	Props / $emit	最标准、单向数据流
兄弟组件	Event Bus / Vuex	简单用 Bus，复杂用 Vuex
跨多层组件	Provide/Inject	避免层层传递 props
全局共享状态	Vuex	可预测、可调试、DevTools 支持
临时/一次性通信	Event Bus	轻量，但注意解绑事件