Vue 組件註冊方式

寫在前面

不管是 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',{ 
    options 
})

示例以下：

//main.js
//此示例是在 vue-cli 建立的項目，默認是非完整版vue，沒法用 template 選項，所以使用 render 函數寫組件內容。
Vue.component('all-test',{
  data(){
    return {
      x: '我是全局組件'
    }
  },
  render(h){
    return h('div',this.x)
  }
})

//全局註冊的組件直接使用便可
//App.vue
<template>
  <div id="app">
    <all-test />
  </div>
</template>

2 局部註冊

局部註冊是經過一個普通的 JavaScript 對象來定義組件。而後組件的命名和註冊入口是在 Vue實例 構造選項中的 components 選項。

let component = { options }

//new Vue 建立的根元素 Vue 實例
new Vue({
    el: '#app'
    components: {
        'my-component-name': component
    }
})

//或註冊 Vue組件 建立的 Vue 實例
export default {
    components: {
        'my-component-name': component
    }
}

示例以下：

//App.vue
<template>
  <div id="app">
    <all-test />
    <component-a />
    <component-b />
  </div>
</template>

<script>
let ComponentA = {
  data(){
    return {
      x: '我是局部組件 A'
    }
  },
  render(h){
    return h('div',this.x)
  }
}

export default {
  name: 'App',
  components: {
    'component-a': ComponentA,
    'component-b': {
        data(){
          return {
            x: '我是局部組件 B'
          }
        },
        render(h){
          return h('div',this.x)
        }
    } 
  }
}
</script>

3 模塊系統中局部註冊

在使用了諸如 Babel 和 webpack 的模塊系統中可使用 import 和 export 的方式單獨導入組件的構造選項對象 或者 導入對應構造選項的 *.vue 文件。

//c.js
export default {
    data(){
        return {
          x: '我是 c.js 文件單獨導出的組件構造選項對象'
        }
      },
      render(h){
        return h('div',this.x)
      }
}

//D.vue
<template>
    <div>
        {{x}}
    </div>
</template>

<script>
export default {
    data(){
        return {
            x: '我是 D.vue 文件導出的組件'
        }
    }
}
</script>

//App.vue
<template>
  <div id="app">
    <C />
    <D />
  </div>
</template>

import C from './c.js'
import D from './components/D.vue'

export default {
  name: 'App',
  components: {
    C,
    D 
  }
}
</script>