Vue组件间通信方案有哪些？典型应用场景如何解析？

本文共计2448个文字，预计阅读时间需要10分钟。

目录+什么是组件通信+1. 父子组件通信场景+2. 兄弟组件通信场景+3. 根组件和后代组件通信场景+4. 插槽通信场景+5. 无直接关系的组件通信场景+6. 大型项目中复杂组件通信场景+- Vue

目录

• 什么是组件通信
• 1、父子组件通信场景
• 2、兄弟组件通信场景
• 3、根组件和后代组件通信场景
• 4、插槽通信场景
• 5 无直接关系的组件通信场景
• 6 大型项目中的复杂组件通信场景 - Vuex状态管理
• 7 其他的一些组件通信方案
• 总结

什么是组件通信

所谓组件通信，就是组件之间的数据交互，也就是把一个组件A里面的数据传递到另一个组件B，并能够让组件B根据这个数据更新界面。

在 Vue中，可用的通信方案有很多，下面给大家描述几个常用的组件通信方案及其典型的应用场景。

1、父子组件通信场景

父子组件通信是最典型的组件通信场景，没有之一，他们之间通信主要使用自定义属性或者ref。

第一种是自定义属性,使用较为广泛，在子组件中使用 props 选项进行接收,子组件向父组件回传数据，使用自定义事件，在子组件中使用 $emit() 方法触发执行，并回传数据给父组件。