Vue（十一）：组件边界

1、访问元素和组件

　　1）、访问根节点
　　　　我们可以在任何一个地方通过this.$root访问根节点的数据，但是容易造成混乱，不建议在大型项目中调用。如果你使用的是vue项目，那这个根节点应该是main.js中创建的vue实例。官网建议使用vuex，我点过去这是另外一个开源的项目，回头研究研究。

　　2）、访问父节点
　　　　this.$parent代表父节点

　　3）、访问子节点
　　　　在组件上设置ref属性，给ref设置属性名，渲染完组件之后，访问this.$refs.属性名就是访问这个组件的vue实例了，如果有相同的属性名，则最后一个会覆盖前面相同的vue实例

　　4）、依赖注入
　　　　父级组件通过provide来声明父级有哪些属性/方法可以访问，子级组件通过inject来声明我会访问父级的哪些属性/方法，官网建议理解成大范围的prop。

provide: function() {  //父级代码
          return {
            getMap: this.getMap
          };
        },
 
inject: ["getMap"],  //子级代码

2、程序化的事件侦听器

 　　事件侦听器的作用就是侦听组件自身的事件，这个事件可以是自定义的，也可以是组件自带的。有以下这个几个侦听器：

通过 $on(eventName, eventHandler) 侦听一个事件
通过 $once(eventName, eventHandler) 一次性侦听一个事件
通过 $off(eventName, eventHandler) 停止侦听一个事件

　　官网给出的demo就是侦听组件本身的"销毁前"事件，当我们引入另外一个时间选择框组件的时候，侦听组件本身的"销毁前"事件，在这个事件中先把自己给销毁掉，这样保证没有浪费实例。代码：

mounted: function () {
  this.attachDatepicker('startDateInput')
  this.attachDatepicker('endDateInput')
},
methods: {
  attachDatepicker: function (refName) {
    var picker = new Pikaday({
      field: this.$refs[refName],
      format: 'YYYY-MM-DD'
    })

    this.$once('hook:beforeDestroy', function () {
      picker.destroy()
    })
  }
}

3、递归组件和组件之间的循环引用
　　假设我们有组件A和组件B，递归组件就是组件A调用了组件A，一直调用自己。组件循环引用就是组件A调用了组件B，组件B又调用了组件A，两个组件相互引用。
　　其实这两种情况如果产生了问题，本质上都是陷入了死循环，避免这种情况出现我们要做的就是终止循环，破局。
　　第一我们要做的就是逻辑控制，给定一个判断好的条件是最重要的，当特定的条件出现时终止循环，循环的次数最好不要超过5次。
　　第二就是引用组件的时候使用懒加载，用到引入的组件才会加载，也会避免陷入死循环。例子：

components: {
  CompotenA: () => import('./CompotenB.vue')
}