vue组件

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

# 1. 父组件:

  


  export default {
    mounted () {
      const comA = this.$refs.comA;
      console.log(comA.title);  // Vue.js,访问子组件的服务器托管网data数据
      comA.sayHello();          // 弹窗,访问子组件的方法
    }
  }


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

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

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

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

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

// 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.