1、组件之间的关系

1.1 在项目开发中，组件之间的关系分为如下3种：

① 父子关系

② 兄弟关系

③ 后代关系

1.2 如图所示

①【组件A】以下的所有组件，和【组件A】都是父子关系，比如：【组件A】和【组件B1】、【组件A】和【组件D1】

②【组件B1】和【组件B2】同在【组件A】之下，是兄弟关系

③【组件B1】和【组件C2】、【组件B2】和【组件D1】看起来无任何关系，但是由于都在【组件A】之下，实际上他们属于一种“特殊的兄弟关系”

2、父子组件之间的数据共享

2.1 父子组件之间的数据共享可分为：

① 父 -> 子共享数据

② 子 -> 父共享数据

③ 父 <-> 子双向数据同步

2.2 父组件向子组件共享数据

父组件通过 v-bind 绑定向子组件共享的数据，子组件使用 props 接收数据。

父组件向子组件共享数据：

子组件接收数据：

2.3 子组件向父组件共享数据

子组件通过自定义事件的方式，向父组件共享数据，示例代码如下：

父组件接收子组件传递的数据：

2.4 父子组件之间数据的双向同步

父组件在使用子组件期间，可以使用 v-model 指令维护组件内外数据的双向同步。

父组件通过 v-model 绑定参数：

子组件接收参数，并再次向父组件抛出修改后的数据：

3、兄弟组件之间的数据共享

3.1 EventBus 方案

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

示例图如下：

3.2 EventBus 实现数据共享的流程

① 安装 mitt 依赖包

在项目中运行如下的命令，安装 mitt 依赖包：

② 创建公共的 eventBus 模块

在项目的 main.js 同级目录下，创建 eventBus.js 文件，添加如下内容，导出公共的 eventBus 模块，

③ 在父组件中导入子组件

导入多个组件时，由于在同一个父组件之下，所以它们属于兄弟关系

④ 在数据接收方自定义事件

在数据接收方，调用 bus.on("事件名称", 事件处理函数) 方法注册一个自定义事件，示例代码如下：

⑤ 在数据发送方触发事件

在数据发送方，调用 bus.emit("事件名称", 要发送的数据) 方法触发自定义事件。示例代码如下：

3.3 EventBus 总结说明

① 数据接收方使用 .on() 方法

② 数据发送方使用 .emit() 方法

③ 使用 .on() 和 .emit() 方法时，第一个参数都是事件名称，且事件名称要一致

④ 只有一个数据时，直接在 .on() 和 .emit() 方法的第二个形参传递即可

⑤ 多个数据时，推荐使用对象或数组包装后传递使用

4、后代关系组件之间的数据共享

4.1 后代组件之间共享数据的方式

后代关系组件之间共享数据，指的是父节点的组件向其子节点共享数据。当组件之间的嵌套关系层级较多时，可以使用 provide 和 inject 实现后代关系组件之间的数据共享。

4.2 父节点通过 provide 共享数据

父节点的组件可以通过 provide 方法，对其子孙组件共享数据：

4.3 子孙节点通过 inject 接收数据

子孙节点可以使用 inject 数组，接收父节点向下共享的数据，接收后可直接使用。示例代码如下：

4.4 父节点通过 provide 对外共享响应式的数据

当父节点中的 data 数据发生变化时，使用 provide 向下共享的数据，并不会随之发生改变，这种情况需要结合 computed 函数向下共享响应式的数据。示例代码如下：

4.5 子孙节点使用响应式的数据

子孙节点通过 inject 正常接收父级节点共享的响应式数据，使用方式没有变化

5、vuex

vuex 是终极的组件之间的数据共享方案。在企业级的 vue 项目开发中，vuex 可以让组件之间的数据共享变得高效、清晰、易于维护。