Vue 2 组件间传递消息有多种方式根据组件关系和场景选择合适的方法1. 父子组件通信Props / $emit标准方式vue复制!-- 父组件 Parent.vue -- template div h2父组件/h2 Child :messageparentMsg child-eventhandleChildEvent / /div /template script import Child from ./Child.vue export default { components: { Child }, data() { return { parentMsg: 来自父组件的消息 } }, methods: { handleChildEvent(data) { console.log(收到子组件消息:, data) } } } /scriptvue复制!-- 子组件 Child.vue -- template div p收到: {{ message }}/p button clicksendToParent通知父组件/button /div /template script export default { props: [message], methods: { sendToParent() { this.$emit(child-event, { msg: 子组件发来的数据, time: Date.now() }) } } } /script2. 兄弟组件通信Event Bus事件总线JavaScript复制// utils/eventBus.js import Vue from vue export const eventBus new Vue()vue复制!-- 组件 A -- template button clicksendMsg发送给兄弟组件/button /template script import { eventBus } from /utils/eventBus export default { methods: { sendMsg() { eventBus.$emit(brother-msg, { data: Hello Brother }) } } } /scriptvue复制!-- 组件 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 } } } /script3. 跨层级组件通信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) } } } /scriptvue复制!-- 深层孙组件 -- template button clicksendUp向祖先传消息/button /template script export default { inject: [appConfig, getMessage], created() { console.log(配置:, this.appConfig) // { theme: dark, lang: zh } }, methods: { sendUp() { this.getMessage(来自深层组件的问候) } } } /script4. 全局状态管理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 clickchangeMsg修改消息/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() } } } /script5. $refs 直接调用慎用vue复制template Child refchildRef / /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轻量但注意解绑事件⚠️ 注意事项Event Bus 在组件销毁前必须用$off移除监听$refs避免滥用破坏组件封装Vue 3 中 Event Bus 被移除建议用 mitt 替代或直接用 Pinia/Vuex
vue2两个组件间如何传递消息
Vue 2 组件间传递消息有多种方式根据组件关系和场景选择合适的方法1. 父子组件通信Props / $emit标准方式vue复制!-- 父组件 Parent.vue -- template div h2父组件/h2 Child :messageparentMsg child-eventhandleChildEvent / /div /template script import Child from ./Child.vue export default { components: { Child }, data() { return { parentMsg: 来自父组件的消息 } }, methods: { handleChildEvent(data) { console.log(收到子组件消息:, data) } } } /scriptvue复制!-- 子组件 Child.vue -- template div p收到: {{ message }}/p button clicksendToParent通知父组件/button /div /template script export default { props: [message], methods: { sendToParent() { this.$emit(child-event, { msg: 子组件发来的数据, time: Date.now() }) } } } /script2. 兄弟组件通信Event Bus事件总线JavaScript复制// utils/eventBus.js import Vue from vue export const eventBus new Vue()vue复制!-- 组件 A -- template button clicksendMsg发送给兄弟组件/button /template script import { eventBus } from /utils/eventBus export default { methods: { sendMsg() { eventBus.$emit(brother-msg, { data: Hello Brother }) } } } /scriptvue复制!-- 组件 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 } } } /script3. 跨层级组件通信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) } } } /scriptvue复制!-- 深层孙组件 -- template button clicksendUp向祖先传消息/button /template script export default { inject: [appConfig, getMessage], created() { console.log(配置:, this.appConfig) // { theme: dark, lang: zh } }, methods: { sendUp() { this.getMessage(来自深层组件的问候) } } } /script4. 全局状态管理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 clickchangeMsg修改消息/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() } } } /script5. $refs 直接调用慎用vue复制template Child refchildRef / /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轻量但注意解绑事件⚠️ 注意事项Event Bus 在组件销毁前必须用$off移除监听$refs避免滥用破坏组件封装Vue 3 中 Event Bus 被移除建议用 mitt 替代或直接用 Pinia/Vuex
