1. 一般来说,组件有以下几种关系:

①. A和B、B和C、B和D     =>  父子关系
②. C和D                =>  兄弟关系
③. A和C                =>  隔代关系(可能隔多代)

2. 组件间内置的通信手段一般有两种:

这两种方案都是直接得到组件实例,使用后可以直接调用组件的方法或访问数据.

(1). ref给元素或组件注册引用信息:

# 1. 父组件:
<template>
  <component-a ref="comA"></component-a>
</template>
<script>
  export default {
    mounted () {
      const comA = this.$refs.comA;
      console.log(comA.title);  // Vue.js,访问子组件的data数据
      comA.sayHello();          // 弹窗,访问子组件的方法
    }
  }
</script>

# 2. 子组件:
export default {
  data () {
    return {
      title: 'Vue.js'
    }
  },
  methods: {
    sayHello () {
      window.alert('Hello');
    }
  }
}

(2). vue组件_idechildren也是基于当前上下文访问父组件或全部子组件的:

(3). 这两种方法的弊端:

①. 无法在跨级或兄弟间通信(跨级通信),如下结构:
    // parent.vue
    <component-a></component-a>
    <component-b></component-b>
    <component-b></component-b>
    a. 无法从component-a中,访问到引用它的页面中(parent.vue)的两个component-b组件中的值和方法.
    b. 当组件A和组件B中间隔了数代时,可以配置额外的插件或工具了.
       1. 如Vuex和Bus的解决方案.
       2. 它们都是依赖第三方插件/第三方库的存在,不推荐用来开发独立组件.
    c. 不依赖任何三方插件,使用provide/inject来获取任意的组件实例,或在任意组件间进行通信,且适用于任意场景.

(2). vue组件_数据_02children：访问父 / 子实例:

3. 无依赖的组件通信方法 - provide/inject:

①. Vue内置的provide/inject接口.
    a. 2.2.0版本后新增的API.

②. 需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效.
    a. 类似React的上下文特性.

③. 属于高阶插件/组件库提供用例,并不推荐直接用于应用程序代码中.
    a. 不建议在业务中使用这对API,而是在插件/组件库中使用.

(1). 组件中使用,B是A的子组件:

// A.vue
export default {
  provide: {   // 作用是将name变量提供给它的所有子组件
    name: 'Aresn'
  }
}

// B.vue
export default {
  // 通过inject注入从A组件中提供的name变量,可以直接通过this.name访问这个变量
  inject: ['name'],
  mounted () {
    console.log(this.name);  // Aresn
  }
}

注:
①. provide和inject绑定并不是可响应的:
    a. 但是如果传入一个可监听的对象,那么其对象的属性还是可响应的.
    b. 上面A的name如果改变了,B的this.name是不会改变的,仍然是Aresn.

(2). 替代Vuex状态管理: Vuex用于集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.

使用Vuex,最主要的目的是跨组件通信、全局数据维护、多人协同开发.如用户的登录信息维护、通知信息维护等全局的状态和数据.

一般在 webpack 中使用 Vue.js，都会有一个入口文件 main.js，里面通常导入了 Vue、VueRouter、iView 等库，通常也会导入一个入口组件 app.vue 作为根组件。一个简单的 app.vue 可能只有以下代码：