Vue組件注冊(cè)方式有哪些

小編給大家分享一下Vue組件注冊(cè)方式有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

概述

組件化的概念讓前端頁面開發(fā)有了更清晰的結(jié)構(gòu)。

Vue 中的組件就是一個(gè) Vue 的實(shí)例對(duì)象。因此，Vue 組件的構(gòu)造選項(xiàng)和 new Vue() 方法構(gòu)造 Vue 實(shí)例的構(gòu)造選項(xiàng)是一樣的，其可接收的構(gòu)造選項(xiàng)都是一樣的。除了 el 這樣 根實(shí)例 特有的選項(xiàng)。但是，Vue 組件必須得是可以復(fù)用的，因此，就必須要求構(gòu)造選項(xiàng)中的 data 選項(xiàng)必須是一個(gè)函數(shù)，該函數(shù)返回一個(gè)對(duì)象。

為什么 data 選項(xiàng)是個(gè)返回對(duì)象的函數(shù)就可以保證組件的可復(fù)用性呢？

因?yàn)闊o論是 new Vue() 的方式還是定義 Vue組件 的方式創(chuàng)建一個(gè) Vue 實(shí)例，其執(zhí)行的操作都是將構(gòu)造選項(xiàng)中的各屬性值直接賦值給新創(chuàng)建的 Vue 實(shí)例對(duì)象。組件復(fù)用就是 Vue 使用 相同的構(gòu)造選項(xiàng) 構(gòu)造出多個(gè)同名不同地址的 Vue 實(shí)例對(duì)象。如果 Vue 組件定義時(shí)的構(gòu)造選項(xiàng)中的 data 選項(xiàng)是一個(gè)對(duì)象，那么在組件復(fù)用時(shí)，多個(gè)組件就會(huì)共用一個(gè) data 數(shù)據(jù)對(duì)象，因?yàn)槭侵苯訉?data 對(duì)象的地址賦值給組件的 Vue 實(shí)例的。但如果組件定義時(shí)的 data 選項(xiàng)是一個(gè)函數(shù)的話，那么 Vue 根據(jù)構(gòu)造選項(xiàng)創(chuàng)建組件時(shí)會(huì)執(zhí)行該函數(shù)從而得到一個(gè)對(duì)象。這樣一來，每次創(chuàng)建 Vue 實(shí)例時(shí)的 data 對(duì)象都是重新生成的，因此，多個(gè)組件都有各自的 data 數(shù)據(jù)對(duì)象，不會(huì)相互影響。

實(shí)際上，在組件注冊(cè)時(shí)是在定義組件的構(gòu)造選項(xiàng)，在組件使用時(shí)才真正創(chuàng)建對(duì)應(yīng)的 Vue 組件實(shí)例。

1 、全局注冊(cè)

全局注冊(cè)的組件可以在 Vue 根實(shí)例和所有的子組件中使用。注冊(cè)入口為Vue.component()函數(shù)，一次注冊(cè)，隨時(shí)使用，注冊(cè)方式如下：

Vue.component('my-component-name',{ 
    options 
})

示例如下：

//main.js
//此示例是在 vue-cli 創(chuàng)建的項(xiàng)目，默認(rèn)是非完整版vue，無法用 template 選項(xiàng)，因此使用 render 函數(shù)寫組件內(nèi)容。
Vue.component('all-test',{
  data(){
    return {
      x: '我是全局組件'
    }
  },
  render(h){
    return h('div',this.x)
  }
})

//全局注冊(cè)的組件直接使用即可
//App.vue
<template>
  <div id="app">
    <all-test />
  </div>
</template>

2 、局部注冊(cè)

局部注冊(cè)是通過一個(gè)普通的 JavaScript 對(duì)象來定義組件。然后組件的命名和注冊(cè)入口是在 Vue實(shí)例 構(gòu)造選項(xiàng)中的 components 選項(xiàng)。

let component = { options }

//new Vue 創(chuàng)建的根元素 Vue 實(shí)例
new Vue({
    el: '#app'
    components: {
        'my-component-name': component
    }
})

//或注冊(cè) Vue組件 創(chuàng)建的 Vue 實(shí)例
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 、模塊系統(tǒng)中局部注冊(cè)

在使用了諸如 Babel 和 webpack 的模塊系統(tǒng)中可以使用 import 和 export 的方式單獨(dú)導(dǎo)入組件的構(gòu)造選項(xiàng)對(duì)象 或者 導(dǎo)入對(duì)應(yīng)構(gòu)造選項(xiàng)的 *.vue 文件。

//c.js
export default {
    data(){
        return {
          x: '我是 c.js 文件單獨(dú)導(dǎo)出的組件構(gòu)造選項(xiàng)對(duì)象'
        }
      },
      render(h){
        return h('div',this.x)
      }
}

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

<script>
export default {
    data(){
        return {
            x: '我是 D.vue 文件導(dǎo)出的組件'
        }
    }
}
</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是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項(xiàng)目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

以上是“Vue組件注冊(cè)方式有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！