解讀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組件注冊(cè)方式的詳細(xì)內(nèi)容,更多關(guān)于Vue組件注冊(cè)方式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue文件批量上傳及進(jìn)度條展示的實(shí)現(xiàn)方法
開發(fā)項(xiàng)目的時(shí)候,用到文件上傳的功能很常見,包括單文件上傳和多文件上傳,下面這篇文章主要給大家介紹了關(guān)于vue文件批量上傳及進(jìn)度條展示的實(shí)現(xiàn)方法,需要的朋友可以參考下2022-12-12Vue-router 類似Vuex實(shí)現(xiàn)組件化開發(fā)的示例
本篇文章主要介紹了Vue-router 類似Vuex實(shí)現(xiàn)組件化開發(fā)的示例,具有一定的參考價(jià)值,有興趣的可以了解一下2017-09-09Vue百度地圖實(shí)現(xiàn)定位和marker拖拽監(jiān)聽功能
這篇文章主要介紹了Vue百度地圖實(shí)現(xiàn)定位和marker拖拽監(jiān)聽功能,實(shí)現(xiàn)思路非常簡單,本文結(jié)合實(shí)例代碼效果圖給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-11-11vue?parseHTML函數(shù)解析器遇到結(jié)束標(biāo)簽
這篇文章主要介紹了vue?parseHTML函數(shù)源碼解析之析器遇到結(jié)束標(biāo)簽的示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07