Vue组件间通信方式

1. props 传递数据，父组件传递给子组件，在使用子组件时通过标签中字面量来传递值

父组件：<Children data1="a" data2="12" />
子组件：

props: {
    data1: String, // 接收的类型为字符串形式
    data2: {
        type: Nmber, // 接收的参数类型为数字类型
        default: 18, // 默认值
        required: false, // 是否必传
    }
}

2. $emit 子组件反馈给父组件的方法

父组件：<Children @dopost="send" />

// 父组件的dopost方法可以获取子组件传来的参数 “send data”

子组件: this.$emit("send", "send data")

3. 使用ref，父组件直接获取子组件

父组件：<Children ref="children" />

获取子组件: this.$refs.children 或 this.$refs["children"]

4. EventBus 兄弟组件通信

建立一个中央事件总线 EventBus，待研究 TODO

5. parent或root

通过共同祖辈 $parent 或者 $root 搭建通信桥连

兄弟组件：this.$parent.on("add", this.add)

另一个兄弟组件：this.$parent.emit("add")

6. attrs与listeners

祖先传递数据给子孙

7. Provide与Inject

在祖先定义provide属性，返回传递的值

在后代组件通过inject 接收组件传递过来的值

8. Vuex

复杂关系的组件数据传递，vuex相当于一个用来存储共享变量的容器。

state: 用来存放共享变量的地方

getter：

mutations:

actions:

优点：

• 在vuex中，集中式存储和管理共享的数据，便于开发和维护
• 能够高效的实现组件之间的数据共享和传输，提高开发效率（就不用管是父子组件传值还是兄弟组件，还是祖先后代，直接高效的传值）
• 存储在vuex中的数据都是响应式的，能够实时的保持数据和页面的同步（比如localstorage就是办不到的）

缺点：刷新后存储数据会丢失，

解决办法：插件vuex-persistedstate

                  可以借助localStorage/sessionStorage进行存储

在刷新前将vuex中的数据直接保存到浏览器缓存中，页面刷新后，在页面刷新的时候获取缓存数据，使之动态更新vuex数据，

具体步骤：vuex更新时同时出发浏览器缓存，确保刷新之前的缓存数据为最新，在页面刷新时，优先调用缓存数据更新vuex，若接口提供了最新数据则调取接口更新。