Vue 2 组件间通信

Vue 2 中有多种组件间通信的方式，下面列出其中的几种：

1. 父子组件通信
2. 子父组件通信
3. 兄弟组件通信
4. 跨级组件通信
5. 事件总线。
6. Vuex

这些是 Vue 2 中比较常用的几种组件间通信的方式，根据实际的需求和场景，可以选择不同的方式来实现组件间的通信。

父子组件通信

通过 props 将数据从父组件传递给子组件，子组件通过 $emit 触发事件向父组件传递数据

// Parent.vue

<Child :msg='parentMessage' @msg-from-child='printMsg' />

// Child.vue

props: {
    msg: String
}

methods: {
    sendMsg() {
        this.$emit('msg-from-child', 'I am child')
    }
}

爷孙组件通信

1. 使用两次父子组件通信
2. 使用 [ provide + inject ] 来通信

// boss.vue

provide() {
    return {
        msg: 'good job'
    }
}

// boy.vue

inject: ['msg']

使用这种方式传递的数据是单向的，即只能从父级组件向下传递数据，不能反向传递。

事件总线

事件总线（Event Bus）是一种实现组件间通信的方式，它基于 Vue 实例的事件系统，可以让任意组件之间进行通信。

事件总线通常包括一个专门用于事件处理的 Vue 实例

1. $emit 方法来触发事件
2. 通过 $on 方法来监听事件

// event-bus.vue

import Vue from 'vue'
export const eventBus = new Vue()

// A.vue

methods: {
// 点击按钮时触发 eventName事件 传递 data数据
    onClick() {
        eventBus.$emit('eventName', data)
    }
}

// B.vue

// 监听名为 eventName 的事件， 事件触发时调用回调函数结束 data作为参数
eventBus.$on('eventName', (data) => {
    console.log(data)
})

缺点：

1. 命名不规范，可能会导致事件冲突，从而引发问题。
2. 事件总线也不太适合在大型应用中使用，因为它会使得组件间的关系变得不清晰，导致代码难以维护

Vuex

Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

核心概念：

1. State：Vuex 使用单一状态树，即用一个对象就包含了全部的应用层级状态。这个状态树就存放在 State 对象中。
2. Mutation：Mutation 是唯一可以修改应用状态的方式。通过提交 Mutation，我们可以在 Vuex 中修改 State 的状态。
3. Getter：Getter 可以认为是 Store 的计算属性。它的返回值会根据它的依赖缓存起来，且只有当它的依赖发生了改变才会重新计算。
4. Action：Action 类似于 Mutation，但是 Action 提交的是 Mutation，而不是直接变更状态。Action 可以包含任意异步操作。
5. Module：为了应对大型应用的复杂性，Vuex 允许我们将 Store 分割成模块。每个模块拥有自己的 State、Mutation、Getter、Action。