### [全局注冊](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' }) ~~~ ~~~ <div id="app"> <component-a></component-a> <component-b></component-b> <component-c></component-c> </div> ~~~ 在所有子組件中也是如此，也就是說這三個組件*在各自內部*也都可以相互使用。 ### [局部注冊](https://cn.vuejs.org/v2/guide/components-registration.html#局部注冊 "局部注冊") 全局注冊往往是不夠理想的。比如，如果你使用一個像 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` 的縮寫，即這個變量名同時是： * 用在模板中的自定義元素的名稱 * 包含了這個組件選項的變量名