Vue.js中组件通信大揭秘父组件通过props和$emit实现

作者：机器人技术佬 | 发布时间：2025-07-09 |

在Vue.js里，组件之间的信息交换就像人与人之间的交流，有多种方式可以做到。下面，我们就来聊聊这些方法。

一、父子组件间的“对话”：用props和$emit 用props传递信息

父组件就像是信息的发送者，它通过给子组件的标签上绑定属性来传递信息。子组件就像是个懂事的接收者，通过属性来接收这些信息。

父组件	子组件
`<Child :info="message" />`	`props: ['info']`

通过$emit发送事件

当子组件需要向父组件传递信息时，它就像是一个小小的信号发射台，通过触发事件并发送数据。父组件则是信号接收者，它会在子组件触发事件时执行相应的处理函数。

子组件	父组件
`this.$emit('customEvent', data)`	`<Child @customEvent="handleEvent" />`

二、兄弟组件间的“联络”：EventBus或Vuex EventBus：组件间的“信鸽”

EventBus就像是一个信鸽，它可以传递信息给任何组件。创建一个空的Vue实例作为事件总线，然后在组件中使用它来触发或监听事件。

组件A	组件B
`eventBus.$emit('updateData', info)`	`eventBus.$on('updateData', callback)`

Vuex：组件间的“中央数据库”

Vuex就像是一个中央数据库，它用于管理全局状态，实现了组件间的数据共享和通信。简单来说，它就是一个大型的状态对象，所有组件都可以通过Vuex来读写这个状态。

组件A	组件B
`this.$store.commit('updateData', info)`	`computed: { data: state => state.data }`

三、跨级组件间的“桥梁”：provide/inject或Vuex provide/inject：组件间的“隐形通道”

provide/inject就像是一条隐形通道，它允许上级组件向任何下级组件提供数据，而无需知道具体的层级关系。

上级组件	下级组件
`provide: 'data', value: someData`	`inject: ['data'], data`

Vuex：再次扮演“中央数据库”

同上，Vuex也可以实现跨级组件间的数据共享和通信。不管组件层级有多深，Vuex都能让它们像使用同一个数据库一样轻松地共享数据。

四、总结

Vue.js提供了多种组件通信的方式，选择哪种方式取决于具体的项目需求和场景。对于简单的父子组件通信，props和$emit是最佳选择；对于复杂的应用，Vuex则是一个强大且灵活的解决方案。