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、后代关系组件之间的数据共享

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