一、父子关系

1.父 -> 子

自定义属性：父组件：通过 v-bind 属性绑定向子组件共享数据；子组件：需要使用 props 接收数据

2.子 -> 父

自定义事件：子组件：emits申明自定义事件，this.$emit()触发自定义事件；父组件：组件标签使用自定义事件

3.父 <-> 子

v-model 指令：父组件：v-model:number="count"；子组件：props:['number']，emits:['update:number']，this.$emit('update:number',this.number+1)

二、兄弟关系

1.步骤1：安装 mitt[mɪt] 依赖包：npm install mitt@2.1.0

2.步骤2：创建公共的 EventBus 模块：A.导入mitt：import mitt from 'mitt'，B.创建EventBus实例对象：const bus = mitt()，C.共享EventBus 实例对象：export default bus

3.步骤3：在数据接收方自定义事件，调用 bus.on('事件名称', 事件处理函数) 方法注册一个自定义事件

4.步骤4：在数据接发送方触发事件，调用 bus.emit('事件名称', 要发送的数据) 方法触发自定义事件

三、后代关系

1.父节点的组件可以通过 provide[prəˈvaɪd] 方法，对其子孙组件共享数据

2.子孙节点可以使用 inject[ɪnˈdʒekt] 数组，接收父级节点向下共享的数据

3.父节点使用 provide 向下共享数据时，可以结合 computed 函数向下共享响应式的数据

4.如果父级节点共享的是响应式的数据，则子孙节点必须以 .value 的形式进行使用

四、全局数据共享

1.原理： Vuex是实现 组件全局状态(数据)管理 的一种机制，可以方便实现组件之间的数据(状态)共享；主要优势有：可以实现组件之间高效的数据共享、易于开发和后期维护、并且存储在Vuex的数据是响应式的，能够保持数据与页面同步

2.构成： state，mutations，action，getters，modules.

• State[steɪt]：State节点用于存放全局共享的数据，提供了唯一的公共数据源

• Mutation[mjuːˈteɪʃn]：Mutation用于变更State节点中存放的数据，只有Mutation才能变更共享的数据，其他节点变更数据都是不合法的

• Action[ˈækʃn]：action用于处理异步任务函数，不能在 mutations中执行异步操作函数；但是在action 中还是要通过触发mutation的方式间接变更数据，action中不能直接修改共享数据

• Getter[ˈgɛtə]：用于对Store中的数据进行加工处理形成新数据，不会改变原数据；Store中数据发生变

  化，Getter数据也跟着变化

3.vuex页面刷新数据丢失问题及解决方式

1、原因： 刷新页面vuex的数据会丢失属于正常现象，因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被清空。

2、解决方法：

• 方法1：将vuex中的数据直接保存到浏览器缓存中：具体做法应该在vuex里数据改变的时候把数据拷贝一份保存到sessionStorage/localStorage里面；刷新之后，如果sessionStorage/localStorage里有保存的数据，取出来再替换store里的state。
• 方法2：使用vuex-persistedstate插件：本质的原理也是使用了本地的储存，也可以分别存储在 cookie , sessionStorage , localStorage 里面；