vue.extend與vue.component的區(qū)別和聯(lián)系
如果大家只顧開發(fā),對(duì)基礎(chǔ)知識(shí)不了解,在今后的解決問(wèn)題過(guò)程中,也是個(gè)大問(wèn)題,今天小編抽空對(duì)基礎(chǔ)概念給大家屢一下,用于大家日后學(xué)習(xí)。
Vue.extend({})簡(jiǎn)述:使用vue.extend返回一個(gè)子類構(gòu)造函數(shù),也就是預(yù)設(shè)部分選項(xiàng)的vue實(shí)例構(gòu)造器。
后可使用vue.component進(jìn)行實(shí)例化、或使用new extendName().$mount(''+el)
方式進(jìn)行實(shí)例化(從而實(shí)現(xiàn)模擬組件)。
Vue.component({})
簡(jiǎn)述:不多介紹了。。。用于生成全局組件
使用:
1,Vue.component使用Vue.extend生成的構(gòu)造函數(shù):
2,實(shí)例化構(gòu)造函數(shù)從而模擬組件:
vue.extend與vue.component的區(qū)別總結(jié)
在Vue.js中,Vue本身是一個(gè)constructor。
Vue.extend() 是一個(gè)繼承于方法的 class,參數(shù)是一個(gè)包含組件選項(xiàng)的對(duì)象。它的目的是創(chuàng)建一個(gè)Vue的子類并且返回相應(yīng)的 constructor。
而Vue.component()實(shí)際上是一個(gè)類似于Vue.directive() 和 Vue.filter()的注冊(cè)方法,它的目的是給指定的一個(gè)constructor一個(gè)String類型的ID,
之后Vue.js可以把它用作模板,實(shí)際上當(dāng)你直接傳遞選項(xiàng)給Vue.component()的時(shí)候,它會(huì)在背后調(diào)用Vue.extend()。
Vue.js支持兩種不同的API模型:一種是基于類的,命令式的,Backbone 類型的API;另一種是基于標(biāo)記語(yǔ)言的,聲明式的,Web組件類型的API。
如果還是困惑的話,可以想象你是怎么創(chuàng)建通過(guò)new Image()或者 <img>標(biāo)簽創(chuàng)建 image元素的就知道了。
這兩種方法都對(duì)指定的類型很有用,Vue.js提供這兩者只是為了更好的靈活性。
下面看下vue.extend,new vue 和vue.component的區(qū)別
extend 是構(gòu)造一個(gè)組件的語(yǔ)法器. 你給它參數(shù) 他給你一個(gè)組件 然后這個(gè)組件
你可以作用到Vue.component 這個(gè)全局注冊(cè)方法里, 也可以在任意vue模板里使用apple組件
var apple = Vue.extend({ …. }) Vue.component(‘a(chǎn)pple',apple)
你可以作用到vue實(shí)例或者某個(gè)組件中的components屬性中并在內(nèi)部使用apple組件
new Vue({ components:{ apple:apple } })
Vue.component 你可以創(chuàng)建 ,也可以取組件 例如下
var apple = Vue.component(‘a(chǎn)pple')
而new vue 是新建一個(gè)vue對(duì)象 所以可以理解為new vue < vue.extand < vue.component
相關(guān)文章
詳解elementui之el-image-viewer(圖片查看器)
這篇文章主要介紹了詳解elementui之el-image-viewer(圖片查看器),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08Vue讓router-view默認(rèn)顯示頁(yè)面操作方法
一個(gè)home頁(yè)面,點(diǎn)擊左邊的菜單欄,右邊顯示頁(yè)面,因此都知道在右邊放一個(gè)router-view然后配置路由即可,然而問(wèn)題出現(xiàn)在:重新打開的時(shí)候,默認(rèn)是白色空的,遇到這樣的問(wèn)題如何解決呢,下面小編給大家分享Vue讓router-view默認(rèn)顯示頁(yè)面操作方法,感興趣的朋友一起看看吧2024-03-03在Vue中使用deep深度選擇器修改element UI組件的樣式
這篇文章主要介紹了在Vue中使用deep深度選擇器修改element UI組件的樣式,本文分為兩種方法給大家介紹,在這小編比較推薦使用第二種使用 deep 深度選擇器,感興趣的朋友跟隨小編一起看看吧2022-12-12vue2.x?el-table二次封裝實(shí)現(xiàn)編輯修改
本文主要介紹了vue2.x?el-table二次封裝實(shí)現(xiàn)編輯修改,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03Vue為何棄用Ajax,選擇Axios?ajax與axios的區(qū)別?
ajax技術(shù)實(shí)現(xiàn)了局部數(shù)據(jù)的刷新,axios實(shí)現(xiàn)了對(duì)ajax的封裝;axios有的ajax都有,ajax有的axios不一定有??偨Y(jié)一句話就是axios是ajax,ajax不止axios。2023-01-01解決VUE自定義拖拽指令時(shí) onmouseup 與 click事件沖突問(wèn)題
這篇文章主要介紹了解決VUE自定義拖拽指令時(shí) onmouseup 與 click事件沖突問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07vue2中provide/inject的使用與響應(yīng)式傳值詳解
Vue中 Provide/Inject實(shí)現(xiàn)了跨組件的通信,下面這篇文章主要給大家介紹了關(guān)于vue2中provide/inject的使用與響應(yīng)式傳值的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09