淺析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.子產品系統

這塊還沒有完全看懂，等看懂了再來