組件的組織
通常一個應用會以一棵嵌套的組件樹的形式來組織：
例如，你可能會有頁頭、側邊欄、內容區等組件，每個組件又包含了其它的像導航鏈接、博文之類的組件。
為了能在模板中使用，這些組件必須先注冊以便 Vue 能夠識別。這里有兩種組件的注冊類型：全局注冊和局部注冊。至此，我們的組件都只是通過 Vue.component 全局注冊的：
Vue.component('my-component-name', {
// ... options ...
})
全局注冊的組件可以用在其被注冊之后的任何 (通過 new Vue) 新創建的 Vue 根實例，也包括其組件樹中的所有子組件的模板中。
組件名
在注冊一個組件的時候，我們始終需要給它一個名字。比如在全局注冊的時候我們已經看到了：
Vue.component('my-component-name', { /* ... */ })
該組件名就是 Vue.component 的第一個參數
組件命名方式
定義組件名的方式有兩種：
- 短橫線分隔命名：my-component-name
- 首字母大寫命名：MyComponentName
短橫線分隔命名
Vue.component('my-component-name', { /* ... */ })
當使用 (短橫線分隔命名) 定義一個組件時，使用時例如： <my-component-name></my-component-name>
首字母大寫命名
Vue.component('MyComponentName', { /* ... */ })
當使用 (首字母大寫命名) 定義一個組件時，你在引用這個自定義元素時兩種命名法都可以使用。也就是說 <my-component-name> 和 <MyComponentName> 都是可接受的。
注意，盡管如此，直接在 DOM (即非字符串的模板) 中使用時只有 短橫線分隔命名 是有效的。
全局注冊
全局注冊就是使用Vue.component 來創建組件：
Vue.component('my-component-name', {
// ... 選項 ...
})
這些組件是全局注冊的。也就是說它們在注冊之后可以用在任何新創建的Vue根實例 (new Vue) 的模板中。比如：
<div id="app">
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
new Vue({ el: '#app' })
但是全局注冊實際項目中用的不多
局部注冊
全局注冊往往是不夠理想的。比如，如果你使用一個像 webpack 這樣的構建系統，全局注冊所有的組件意味着即便你已經不再使用一個組件了，它仍然會被包含在你最終的構建結果中。這造成了用戶下載的 JavaScript的無謂的增加。
在這些情況下，你可以通過一個普通的 JavaScript對象來定義組件：
let ComponentA = {
template: `<p>hello</p>`
}
let ComponentB = {
template: `<p>world</p>`
}
然后在 components 選項中定義你想要使用的組件：
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
對於 components 對象中的每個 property 來說，其 property 名就是自定義元素的名字，其 property 值就是這個組件的選項對象。
當然實際開發過程中我們使用模塊系統注冊組件更多，這塊后面再介紹