全局注册组件和局部注册组件个人理解

刚学vue时候对于全局组件和局部组件有点懵逼，不知道什么时候用全局，什么时候用局部，下面是vue官网的文档，看了文档后，我个人的理解是，全局组件就是用 Vue.component来创建，局部组件就是var 变量名={}来创建的，全局组件可以在任何新创建的实例中使用，也就是这样：

new Vue({ el: '#app' })

  
  
  

但如果用的是局部组件，也就是var 变量名={}的方式，那么你就需要先在父组件里注册一下才能用，多了一个这个步骤：

new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

跟上一个相比，就是多出了components这个东西
一般一些基础组件，频繁需要用到的，用全局注册，而只在某一个页面中使用的组件，用局部注册
附上官网地址：https://cn.vuejs.org/v2/guide/components-registration.html
下面是官网文档，直接复制过来的

全局注册

用 Vue.component 来创建组件：

Vue.component(‘my-component-name’, {
// … 选项 …
})
这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如：

Vue.component(‘component-a’, { /* … / })
Vue.component(‘component-b’, { / … / })
Vue.component(‘component-c’, { / … */ })

new Vue({ el: ‘#app’ })

记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。

局部注册

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：

var ComponentA = { /* … / }
var ComponentB = { / … / }
var ComponentC = { / … */ }
然后在 components 选项中定义你想要使用的组件：

new Vue({
el: ‘#app’,
components: {
‘component-a’: ComponentA,
‘component-b’: ComponentB
}
})
对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。

注意局部注册的组件在其子组件中不可用。例如，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：

var ComponentA = { /* … */ }

var ComponentB = {
components: {
‘component-a’: ComponentA
},
// …
}
或者如果你通过 Babel 和 webpack 使用 ES2015 模块，那么代码看起来更像：

import ComponentA from ‘./ComponentA.vue’

export default {
components: {
ComponentA
},
// …
}
注意在 ES2015+ 中，在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写，即这个变量名同时是：

用在模板中的自定义元素的名称
包含了这个组件选项的变量名