寫在前面
無論是 vue 還是 react，都有元件的概念。元件，顧名思義就是能和別人組合在一起的物件。在前端頁面開發過程中，將乙個頁面劃分成乙個個小的模組，每個模組單獨定義，每個模組就是乙個元件。元件還可以進行復用，a 頁面和 b 頁面有乙個相似的模組，可以抽離成乙個可區域性修改的元件。
元件化的概念讓前端頁面開發有了更清晰的結構。
vue 中的元件就是乙個 vue 的例項物件。因此，vue 元件的構造選項和 new vue() 方法構造 vue 例項的構造選項是一樣的，其可接收的構造選項都是一樣的。除了 el 這樣 根例項 特有的選項。但是，vue 元件必須得是可以復用的，因此，就必須要求構造選項中的 data 選項必須是乙個函式，該函式返回乙個物件。
為什麼 data 選項是個返回物件的函式就可以保證元件的可復用性呢？
因為無論是 new vue() 的方式還是定義 vue元件 的方式建立乙個 vue 例項，其執行的操作都是將構造選項中的各屬性值直接賦值給新建立的 vue 例項物件。元件復用就是 vue 使用 相同的構造選項 構造出多個同名不同位址的 vue 例項物件。如果 vue 元件定義時的構造選項中的 data 選項是乙個物件，那麼在元件復用時，多個元件就會共用乙個 data 資料物件，因為是直接將 data 物件的位址賦值給元件的 vue 例項的。但如果元件定義時的 data 選項是乙個函式的話，那麼 vue 根據構造選項建立元件時會執行該函式從而得到乙個物件。這樣一來，每次建立 vue 例項時的 data 物件都是重新生成的，因此，多個元件都有各自的 data 資料物件，不會相互影響。
實際上，在元件註冊時是在定義元件的構造選項，在元件使用時才真正建立對應的 vue 元件例項。
1 全域性註冊
全域性註冊的元件可以在 vue 根例項和所有的子元件中使用。註冊入口為vue.component()函式，一次註冊，隨時使用，註冊方式如下：
vue.component('my-component-name',
//new vue 建立的根元素 vue 例項
new vue(}
export default {
data(){
return {
x: '我是 d.vue 檔案匯出的元件'
import c from './c.js'
import d from './components/d.vue'
export default {
components: {c,d
Vue元件註冊
方式一 vue.component my component name 方式二 vue.component mycomponentname 方式一 在dom中可以直接用，是有效的元素 方式二 可用在單檔案元件中 single file component 元件註冊後，可在全域性使用，並且全域性元件之...
vue元件註冊
我們會在多個頁面使用button，每個頁面寫起來很麻煩，如果想把它做成乙個公用元件，使用時直接呼叫會比較方便。現在建立了乙個元件button.vue。找到main.js檔案，然後輸入如下 import button from components button.vue vue.component m...
Vue 元件註冊
全域性元件 全域性元件註冊語法 components中的兩個引數元件名稱和元件內容 vue.component 元件名稱,全域性元件註冊應用 元件建立 vue.component button counter template 點選了 次 methods var vm new vue 如何在頁面中運...