浅析Vue的组件注册

因为之前看了的VUE组件的几种通信方式，但是对其中一些概念理解并不是非常的清晰，所以打算把Vue的组件注册来重新梳理一下，梳理之后再回去看通信方式，应该会有更好的理解。
Vue的组件注册其实有以下几种：
1.全局注册
2.局部注册
3.模块系统中：在模块系统中局部注册，基础组件的自动化全局注册。

Vue.component（组件），组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能，通俗的理解话相当于是一个脚手架的工具。所有的 Vue 组件同时也都是 Vue 的实例。
全局注册：

//HTML
<div id="componentExample">
  <my-component></my-component>
</div>

//JS代码
Vue.component('my-component', {
  template: '<div>some thing</div>'
})
var vm = new Vue({
  el: '#example',
  data: {  
  } 
})

//渲染结果为
<div id="example">
  <div>some thing</div>
</div>

或者另外一种注册方式，通过 全局API：Vue.extend()

// 注册
var MyComponent = Vue.extend({
  template: '<div>some thing</div>'
});

// 注册
Vue.component('my-component', MyComponent);
var vm = new Vue({
  el: '#example',
  data: {
  }
})

2.局部注册
全局注册我认为是会导致资源的浪费，我们一般使用 webpack 来构建系统，全局注册所有的组件就相当于把所有的组件全部都注册了，即便已经不再使用一个组件了，仍然会被包含在你最终的构建结果中。可以用局部注册来优化：
先定义3个组件

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

3.模块系统
这块还没有完全看懂，等看懂了再来