Vue组件之间通信的方式有哪些？

最新推荐文章于 2025-12-26 15:01:48 发布

原创最新推荐文章于 2025-12-26 15:01:48 发布 · 196 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了Vue.js中的各种组件间通信技术，如Props/Emit、事件总线、Vuex状态管理、Provide/Inject、$attrs/$listeners、$ref、自定义事件、插槽、动态组件以及响应式注入和全局事件总线，详解了组件间有效通信的策略。

Props 和 Emit： 通过父组件向子组件传递数据，子组件可以通过 props 接收数据，而子组件可以通过 emit 事件向父组件发送消息。
事件总线： 使用 Vue.prototype.$bus 创建一个事件总线实例，可以在任何组件中通过该实例触发和监听事件。
Vuex 状态管理： 使用 Vuex 来管理应用的状态，各个组件可以从共享的状态树中读取和修改数据。
Provide 和 Inject： 在父组件使用 provide 提供数据，然后在子组件中使用 inject 来注入数据，实现祖先到后代的传递。
$attrs 和 $listeners： 在组件内可以使用 $attrs 访问父组件传递的所有属性，使用 $listeners 访问父组件传递的所有事件监听器。
$ref： 使用 ref 属性给子组件赋予一个引用，然后可以通过 this.$refs 来访问子组件实例。
自定义事件： 在父组件中通过 v-on 绑定自定义事件，然后在子组件内使用 $emit 触发事件。
插槽（Slot）： 父组件可以在其模板中使用插槽来向子组件传递内容，子组件可以根据插槽内容进行渲染。
动态组件： 使用 <component> 元素动态地渲染不同的组件，可以根据需要切换显示的组件。
Provide/Inject 和响应式注入： 使用 provide 向后代组件注入响应式数据，以实现跨层级的通信。
全局事件总线： 通过创建一个全局的事件总线实例，任何组件都可以订阅和发布事件。
使用 EventBus： 创建一个单独的 Vue 实例作为事件总线，用于组件之间的事件通信。