1. 组件关系

在vue项目的开发当中，组件之间的关系可以分为：

父子关系
兄弟关系
后代关系

父子关系组件之间的数据共享

可以分为：

父向子共享数据
子向父共享数据
父子组件双向数据同步共享

2. 父组件向子组件共享数据

父组件通过 v-bind 属性绑定向子组件共享数据，子组件需要通过 props 节点接受父组件共享过来的数据

实例：父组件v-bind绑定msg 向子组件共享 message 属性中的数据 hello

3.子组件向父组件共享数据

子组件通过自定义事件的方式向父组件共享数据

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

在 vue2.x 中，兄弟组件之间数据共享的方案是 EventBus 首先创建一个eventBus.js文件实例：

import Vue from 'vue'

// 向外共享 Vue 的实例对象 
export default new Vue()

EventBus 的使用步骤：

创建 eventBus.js 模块，并向外共享一个 Vue 的实例对象
在数据发送方，调用 bus.$emit('事件名称', 要发送的数据) 方法触发自定义事件
在数据接收方，调用 bus.$on('事件名称', 事件处理函数) 方法注册一个自定义事件

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

后代关系组件之间共享数据，指的是父节点的组件向其子孙组件共享数据

此时组件之间的嵌套关系比较复杂，可以使用 provide 和 inject 实现后代关系组件之间的数据共享

5.1 后代关系组件之间的普通数据共享

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

// 父组件

export default {
  data() {
    return {
    // 定义父组件要向子孙组件共享的数据
      msg: 'hello'
    }
  }，
  provide() {
  // provide 函数 的 return 对象中 包含了要共享的数据
    return {
      msg: this.msg
    }
  }
}

子孙节点可以使用 inject 数组，接收父级节点向下共享的数据

// 子孙组件
<tenplate>
  <h1>{{ msg }}</h1>
</template>

export default {
  data() {
    return {}
  }，
  inject: ['msg']
}

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

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

// 父组件
import { computed } from 'vue' // 按需导入 computed 函数
export default {
  data() {
    return {
    // 定义父组件要向子孙组件共享的数据
      msg: 'hello'
    }
  }，
  provide() {
  // provide 函数 的 return 对象中 包含了要共享的数据
    return {
      msg: computed(() => this.msg)
    }
  }
}

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

// 子孙组件
<tenplate>
  <h1>{{ msg.value }}</h1> // 子孙节点必须以 .value 的形式进行使用
</template>

export default {
  data() {
    return {}
  }，
  inject: ['msg']
}

前端Vue：组件之间的数据共享