vuejs官方文件之元件註冊
元件名
在註冊一個元件的時候，我們始終需要給他一個名字，比如在全域性註冊的時候我們已經看到了
Vue.component('****',{*******})
該元件名就是Vue,component的第一個引數。
你給予元件的名字可能依賴於你打算拿他來做什麼，當直接在dom中使用一個元件（而不是在字串模板或單檔案元件）的時候，我們強烈推薦遵循w3c規範中的自定義元件名（字母全小寫且必須包含一個連字元）。這會幫助你避免和當前以及未來的html元素相沖突。
你可以在風格指南中查閱到關於元件名的其它建議。
元件名大小寫
定義元件名的方式有兩種：
使用kebab-case
Vue.component('my-component-demo',{****************})
當使用kebab-case短橫線分割命名定義一個元件時，你也必須在引用這個自定義元素時，使用kebab-case,
使用pascalcase
Vue.component('MyComponentDemo',{*******})
當使用 PascalCase (駝峰式命名) 定義一個元件時，你在引用這個自定義元素時兩種命名法都可以使用。也就是說 <my-component-name> 和 <MyComponentName> 都是可接受的。注意，儘管如此，直接在 DOM (即非字串的模板) 中使用時只有 kebab-case 是有效的。
dom模板就是原先就寫在頁面上的，能被瀏覽器識別的 html 結構，會在一載入就被瀏覽器渲染，所以要遵循 html 結構和標籤命名，不然是不會被瀏覽器解析的，也就獲取不到內容了，接著js獲取 dom 節點的內容，就形成了 dom 模板。
字串模板可能原先放在伺服器上啊，script標籤裡，js 的字串裡，原先不參與頁面渲染的一串字元，所以呢 它可以不在乎 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>
在所有子元件中也是如此，也就是說這三個元件在各自內部也都可以相互使用。
區域性註冊
全域性註冊往往是不夠理想的，比如，如果你使用一個像webpack這樣的構建系統，全域性註冊所有的元件意味著即便你已經不再使用一個元件了，他仍然會被包含在你最終的構建結果中，這造成了使用者下載的javascript的無畏增加。
在這些情況下，你可以通過一個普通的 JavaScript 物件來定義元件：
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
然後在components選項中定義你想要使用的元件。
new Vue({
el:'#app'
compoenents:{
'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的縮寫，即這個變數名同時是：
1用在模板中的自定義元素的名稱
2包含了這個元件選項的變數名
模組系統
如果你沒有通過import/require使用一個模組系統，也許可以再切跳過這個章節。如果你使用了，那麼我們會為你提供一些特殊的使用說明和注意事項。
在模組系統中區域性註冊
在使用babel和webpack的模組系統的情況下，我們推薦建立一個components目錄，並將每個元件放置在其各自的檔案中。
然後你需要在區域性註冊之前匯入，每個你想使用的元件。例如，在一個假設的 ComponentB.js 或 ComponentB.vue 檔案中：
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
},
// ...
}
現在 ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用了。
基礎元件的自動化全域性註冊
可能你的許多元件知識包裹了一個輸入框或按鈕之類的元素。是相對通用的，
我們有時候會把他們成為基礎元件。
他們會在各個元件中頻繁的用到。
所以會導致很多元件裡都會有一個包含基礎元件的長列表
import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'
export default {
components: {
BaseButton,
BaseIcon,
BaseInput
}
}
而只是用於模板中的一小部分：
<BaseInput
v-model="searchText"
@keydown.enter="search"
/>
<BaseButton @click="search">
<BaseIcon name="search"/>
</BaseButton>
幸好如果你使用了 webpack (或在內部使用了 webpack 的 Vue CLI 3+)，那麼就可以使用require.context只全域性註冊這些非常通用的基礎元件。這裡有一份可以讓你在應用入口檔案檔案 (比如 src/main.js) 中全域性匯入基礎元件的示例程式碼：
import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'
const requireComponent = require.context(
// 其元件目錄的相對路徑
'./components',
// 是否查詢其子目錄
false,
// 匹配基礎元件檔名的正則表示式
/Base[A-Z]\w+\.(vue|js)$/
)
requireComponent.keys().forEach(fileName => {
// 獲取元件配置
const componentConfig = requireComponent(fileName)
// 獲取元件的 PascalCase 命名
const componentName = upperFirst(
camelCase(
// 剝去檔名開頭的 `./` 和結尾的副檔名
fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
)
)
// 全域性註冊元件
Vue.component(
componentName,
// 如果這個元件選項是通過 `export default` 匯出的，
// 那麼就會優先使用 `.default`，
// 否則回退到使用模組的根。
componentConfig.default || componentConfig
)
})
記住全域性註冊的行為必須在根 Vue 例項 (通過 new Vue) 建立之前發生。這裡有一個真實專案情景下的示例。