Vue3组件之间的数据共享

1. 组件之间的关系

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

1. 父子关系
2. 兄弟关系
3. 后代关系

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

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

1. 父 -> 子共享数据
2. 子 -> 父共享数据
3. 父 <-> 子双向数据同步

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

父组件通过v-bind属性绑定向子组件共享数据。同时，子组件需要使用props接收数据。示例代码如下：

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

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

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

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

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

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

3.1 安装 mitt 依赖包

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

npm install mitt@2.1.0

3.2 创建公共的EventBus模块

在项目中创建公共的eventBus模块如下：

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

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

3.4 在数据接发送方触发事件

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

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

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

4.1 父节点通过provide共享数据

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

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

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

4.3 父节点对外共享响应式的数据

父节点使用provide向下共享数据时，可以结合computed函数向下共享响应式的数据。示例代码如下：

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

如果父级节点共享的是响应式的数据，则子孙节点必须以.value的形式进行使用。示例代码如下：

5. vuex

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

6. 总结

• 父子关系

  1. 父 -> 子 属性绑定
  2. 子 -> 父 事件绑定
  3. 父 <-> 子 组件上的v-model

• 兄弟关系
  4. EventBus

• 后代关系
  5. provide&inject

• 全局数据共享
  6. vuex