Vue是组件化的框架，组件实例间作用域是互相隔离的，所以组件间的通信就变成了开发过程中常常要解决的问题，根据场景可以分为：

　　1. 1.

　　父子组件通信

　　2. 2.

　　非父子组件通信

　　3. 3.

　　跨组件传参

　　4. 4.

　　组件状态共享

　　1. 父子组件通信

　　首先就是最常见的父子组件通信，比如在一个表单组件中创建了一个自定义的表单控件，这就形成了父子组件关系。

　　自定义表单控件这个子组件是需要父组件将value值传递进去来控制子组件内部自有的数据的，这时父组件的Form可以将数据以value属性的形式传递到子组件身上，子组件需要在props中接收并验证，子组件在利用value属性来控制自身的状态(监听属性变化，属性变化后更改自己状态)。

　　父组件需要为子组件绑定一个更改value事件，事件处理器为对应的change方法，子组件在emits中接收后，对应的需要更改表单状态的时候触发该事件。

　　当然上面所说的情况可以封装为v-model的实现。

　　还有一种情况就是父组件调用子组件的方法的时候，比如在使用echarts等第三方组件的时候，往往需要利用ref对其进行标记，拿到组件实例后，父组件主动调用图表等子组件的方法，例如resize，refresh等。

　　这就是父子组件通信的方式：父传子，子传父，父组件调用子组件方法。

　　2.非父子组件通信

　　首先，如果通信的组件较少且组件关系较近，可以采用状态提升的方式，将非父子组件通信变成父子组件通信，例如我们在做数据展示页面的时候，往往会有两个组件，上面一个搜索过滤组件filter，下面又一个表格展示的组件table，当然搜索过滤filter组件执行一些动作的时候要通知table组件去根据条件再次获取数据。

　　我们就可以抽象出过滤条件的数据并维护在父组件身上，将数据传递给两个组件，table组件监听数据变化后重新调用接口，filter组件用户操作后调用父组件传入的方法来更新父组件数据。

　　这样就可以实现功能。

　　如果需要通信的组件非常的多，关系也比较复杂，我们如果用状态提升的话可能会导致最近将状态提升到了最外面的组件上，不合适，此时数据的传递也变得复杂， 使用成本太高，此时就可以采用event-bus，事件总线的方式。

　　比如，在一个页面中有好几个表单组件在收集相关的信息，下面有一个按钮， 按钮点击之后需要让所有的表单组件都去进行提交，此时我们就可以采用event-bus的形式，各个表单组件都绑定同一个事件，事件处理程序中进行提交，点击按钮后触发这个事件就可以。

　　3. 跨组件传参

　　如果我们有一些数据需要向内部很多的子系组件传递的时候，就可以利用provide和inject进行传递，提供数据或者方法的父级组件利用provide来提供数据和方法，子系组件通过inject来取得父级组件提供的内容。

　　例如在传递主题信息、传递更改面包屑的方法。

　　需要注意的是在Vue2中，Provide无法传递动态数据，所以在Vue2中可能就得采取vuex等技术方案来完成。

　　4.组件间状态共享

　　针对用户信息、登录状态、全局的某些配置参数等等需要在很多组件间共享，此时利用上面几种组件通信方式会导致数据流混乱，逻辑不清晰，大部分情况下就会采用vuex、pinia来解决状态共享的问题。

上一篇

Vue3项目打包闭坑指南

下一篇

vue的生命周期都有哪些？