【Vue基础知识再巩固】--Vue的边界情况（依赖注入等）

1，元素，组件的访问

         根元素：this.$root.XXX  (真实项目中多用VueX对全局的状态进行管理)

         父元素：this.$parent.XXX  （多层父级this.$parent.$parent.XXX 寻找，无法很好扩展到更深层级的嵌套组件，引依赖注入）

         子组件元素： this.$refs.XXX （渲染后才可以取到，多结合this.$nextTick()使用）

         依赖注入：父元素设置可访问方法provide；子组件设置要访问方法inject

父组件：
provide: function () {return { getMap: this.getMap } }

子组件：
inject: ['getMap']

2, 组件的循环引用：
      A组件依赖B,B有依赖A组件，这个情况会出现组件或方法未定义的错误，可以使用一下方法解决：

方法一（钩子函数）：
beforeCreate: function () {
  this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
}

方法二（引用），在使用时候才进行引用：
components: {
  TreeFolderContents: () => import('./tree-folder-contents.vue')
}

3，强制刷新$forceUpdate

   还没有留意到数组或对象的变更检测注意事项，或者你可能依赖了一个未被 Vue 的响应式系统追踪的状态。 修改过数据变了，页面没有重新渲染，需手动强制刷新。使用this.$forceUpdate()进行强制更新

4， 内联模板与X-Template模板  （不常使用）

       内联：当 inline-template 这个特殊的 attribute 出现在一个子组件上时，这个组件将会使用其里面的内容作为模板，而不是将其作为被分发的内容。这使得模板的撰写工作更加灵活。<子组件名 inline-template>

      X-Template:需要定义在 Vue 所属的 DOM 元素外，避免使用，会将模板和该组件的其它定义分离开

定义：

引用：Vue.component('hello-world', {
  template: '#hello-world-template'
})