關(guān)于vue.extend和vue.component的區(qū)別淺析
前言
最近一個(gè)朋友問(wèn)我vue.extend和vue.component兩者之間有什么區(qū)別？突然這么一問(wèn)竟答不出來(lái)，回來(lái)想想有必要總結(jié)下，所以本文就來(lái)給大家介紹關(guān)于vue.extend和vue.component的區(qū)別，下面話(huà)不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧。
Vue.extend 返回的是一個(gè)“擴(kuò)展實(shí)例構(gòu)造器”，也就是一個(gè)預(yù)設(shè)了部分選項(xiàng)的 Vue 實(shí)例構(gòu)造器
var myVue = Vue.extend({
// 預(yù)設(shè)選項(xiàng)
}) // 返回一個(gè)“擴(kuò)展實(shí)例構(gòu)造器”
// 然后就可以這樣來(lái)使用
var vm = new myVue({
// 其他選項(xiàng)
})
Vue.component 是用來(lái)全局注冊(cè)組件的方法，其作用是將通過(guò) Vue.extend 生成的擴(kuò)展實(shí)例構(gòu)造器注冊(cè)（命名）為一個(gè)組件，可以簡(jiǎn)單理解為當(dāng)在模板中遇到該組件名稱(chēng)作為標(biāo)簽的自定義元素時(shí)，會(huì)自動(dòng)調(diào)用類(lèi)似于 new myVue 這樣的構(gòu)造函數(shù)來(lái)生成組件實(shí)例，并掛載到自定義元素上，當(dāng)然實(shí)際情況要比這復(fù)雜得多，還需要處理 props 數(shù)據(jù)傳遞、slot 內(nèi)容分發(fā)、自定義事件、組件生命周期……事宜。
在網(wǎng)上看到了一個(gè)網(wǎng)友的分析也分享給大家，如下：
extend 是構(gòu)造一個(gè)組件的語(yǔ)法器.
你給它參數(shù) 他給你一個(gè)組件 然后這個(gè)組件
你可以作用到Vue.component 這個(gè)全局注冊(cè)方法里， 也可以在任意vue模板里使用<apple>組件
var apple = Vue.extend({
....
})
Vue.component('apple',apple)
你可以作用到vue實(shí)例或者某個(gè)組件中的components屬性中并在內(nèi)部使用apple組件
new Vue({
components:{
apple:apple
}
})
Vue.component 你可以創(chuàng)建 ，也可以取組件 例如下
var apple = Vue.component('apple')
new Vue
就是創(chuàng)建一個(gè)vue實(shí)例咯 返回一個(gè)vm實(shí)例 。api中vm的說(shuō)明就是new Vue創(chuàng)建的
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
element-ui多選表格禁用某一行不被選擇問(wèn)題
這篇文章主要介紹了element-ui多選表格禁用某一行不被選擇問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue實(shí)現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說(shuō)明)
這篇文章主要介紹了Vue實(shí)現(xiàn)Hover功能(mouseover與mouseenter的區(qū)別及說(shuō)明)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)可增刪查改的成績(jī)單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
vue使用天地圖、openlayers實(shí)現(xiàn)多個(gè)底圖疊加顯示效果
這篇文章主要介紹了vue使用天地圖、openlayers實(shí)現(xiàn)多個(gè)底圖疊加顯示,根據(jù)返回的經(jīng)緯度列表通過(guò)天地圖、openlayers實(shí)現(xiàn)底圖添加，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2022-04-04
vue3 ts組合式API異常onMounted is called when&
這篇文章主要為大家介紹了vue3 ts組合式API異常onMounted is called when there is no active component問(wèn)題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
element-ui table行點(diǎn)擊獲取行索引（index）并利用索引更換行順序
這篇文章主要介紹了element-ui table行點(diǎn)擊獲取行索引（index）并利用索引更換行順序，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
Vue中子組件不能修改父組件傳來(lái)的Prop值的原因分析
在Vue中，父子組件之間通過(guò)Prop和Event實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定，但是，Vue設(shè)計(jì)者為什么不允許子組件修改父組件傳遞的Prop呢，本文就來(lái)帶大家探究為什么子組件不能修改Prop,需要的朋友可以參考下2023-06-06
vue搜索高亮popsearch組件的實(shí)現(xiàn)示例
有時(shí)候給頁(yè)面內(nèi)容添加一個(gè)關(guān)鍵詞搜索功能,如果搜索結(jié)果能夠像瀏覽器搜索一樣高亮顯示,那找起來(lái)就會(huì)很明顯體驗(yàn)會(huì)好很多,本文就來(lái)介紹一下vue搜索高亮popsearch組件的實(shí)現(xiàn)示例,感興趣的可以了解一下2023-09-09
webstrom Debug 調(diào)試vue項(xiàng)目的方法步驟
這篇文章主要介紹了webstrom Debug 調(diào)試vue項(xiàng)目的方法步驟，詳細(xì)的介紹了兩種調(diào)試vue項(xiàng)目的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
詳解在Vue中使用TypeScript的一些思考(實(shí)踐)
這篇文章主要介紹了詳解在Vue中使用TypeScript的一些思考(實(shí)踐)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07