vue组件之间的通信

前言

现在前端流行的框架主要是vue，react，Angular，vue适合需要渐进式学习和易用性的项目。用vue的比较多
在实际的Vue项目开发中，组件化是核心。但组件之间的数据传递和交互——如何让两个独立的组件通信，有时候我们的开发场景需要用到组件和组件中间的通信，如父子组件通信传参，兄弟组件的通信

通信的底层原理都依赖于以下两点：

1. 响应式系统：实现数据变化到视图更新的联动。
2. 事件机制：利用自定义事件和事件总线传递消息。

通信方式
接下来演示几种常用的通信方式

1.prop传递数据

原理：父组件通过属性（props）将数据传递给子组件，子组件声明接收这些属性。

Props是单向传递，子组件不能直接修改父组件传递的值。

代码示例

2.触发事件传递

原理：子组件通过$emit触发事件，父组件通过v-on监听并处理。

代码示例：

3.兄弟组件通信

原理：创建一个全局事件中心，允许任意组件监听或触发事件。

适用场景：简单通信，需要解耦的组件交互

代码示例：

4.跨级组件通信

原理：祖先组件通过provide提供数据，后代组件通过inject注入。

适用场景：中大型复杂应用，多组件共享状态的场景

代码示例

总结

父子通信：优先使用prop+$emit，简单直接。

兄弟通信：大项目用Vuex。

跨级通信：深层嵌套用provice/inject，频繁交互用使用Vuex。

vue还有很多核心值得学习的，如路由router，vue cli，Vuex等