组件间的数据共享

组件间的数据共享

1. 父子组件间的数据共享

1.1 父组件向子组件：使用自定义属性

核心思想：在父组件中通过自定义属性和v-bind传递，在子组件中用props接收并使用

1.2 子组件向父组件：使用自定义事件

核心思想：在子组件中通过$emit(事件名称，参数)来触发这个自定义事件

---

---

2. 兄弟组件间的数据共享:通过EventBus

兄弟组件之间的数据共享方案是EventBus，可以借助第三方的js库mitt来创建eventbus对象从而实现数据共享。

接收方调用on方法，声明自定义事件，通过事件的回调接收数据

发送方调用emit方法，发送数据

2. 后代组件间的数据共享:通过provide和inject

后代组件：父组件向子孙组件共享数据

3. vuex

对于小型应用或者是简单状态管理需求，使用上述机制即可，但是对于中大型复杂应用需要更强大的状态管理能力，需要借助vuex。

vuex的优点：

• 集中式状态管理：Vuex提供了一个全局的状态树（store）来存储应用程序的状态，而不是将状态分散在各个组件中。
• 状态共享和访问：vuex允许在任何组件中直接访问和修改状态数据，而不需要通过props或事件传递
• 响应式更新： 当状态发生变化时，使用Vuex的组件会自动响应状态的更新
• 状态的改变是可追踪的：在Vuex中，所有对状态的修改都通过提交(mutations)来进行，这使得可以清楚地追踪状态的变化历史。对于调试和故障排除非常有帮助，并且可以通过时间旅行工具来回退到先前的状态。