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