概述

元件化的概念讓前端頁面開發有了更清晰的結構。

vue 中的元件就是一個 Vue 的例項物件。因此，Vue 元件的構造選項和 new Vue() 方法構造 Vue 例項的構造選項是一樣的，其可接收的構造選項都是一樣的。除了 el 這樣 根例項 特有的選項。但是，Vue 元件必須得是可以複用的，因此，就必須要求構造選項中的 data 選項必須是一個函式，該函式返回一個物件。

為什麼 data 選項是個返回物件的函式就可以保證元件的可複用性呢？

因為無論是 new Vue() 的方式還是定義 Vue元件 的方式建立一個 Vue 例項，其執行的操作都是將構造選項中的各屬性值直接賦值給新建立的 Vue 例項物件。元件複用就是 Vue 使用 相同的構造選項 構造出多個同名不同地址的 Vue 例項物件。如果 Vue 元件定義時的構造選項中的 data 選項是一個物件，那麼在元件複用時，多個元件就會共用一個 data 資料物件，因為是直接將 data 物件的地址賦值給www.cppcns.com

實際上，在元件註冊時是在定義元件的構造選項，在元件使用時才真正建立對應的 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'
    }
  },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>

以上就是解讀Vue元件註冊方式的詳細內容，更多關於Vue元件註冊方式的資料請關注我們其它相關文章！