關(guān)于vue.extend和vue.component的區(qū)別淺析
前言
最近一個(gè)朋友問我vue.extend和vue.component兩者之間有什么區(qū)別？突然這么一問竟答不出來，回來想想有必要總結(jié)下，所以本文就來給大家介紹關(guān)于vue.extend和vue.component的區(qū)別，下面話不多說了，來一起看看詳細(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)造器”
// 然后就可以這樣來使用
var vm = new myVue({
// 其他選項(xiàng)
})
Vue.component 是用來全局注冊(cè)組件的方法，其作用是將通過 Vue.extend 生成的擴(kuò)展實(shí)例構(gòu)造器注冊(cè)（命名）為一個(gè)組件，可以簡(jiǎn)單理解為當(dāng)在模板中遇到該組件名稱作為標(biāo)簽的自定義元素時(shí)，會(huì)自動(dòng)調(diào)用類似于 new myVue 這樣的構(gòu)造函數(shù)來生成組件實(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的說明就是new Vue創(chuàng)建的
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
Vue中渲染系統(tǒng)模塊的實(shí)現(xiàn)詳解
想要實(shí)現(xiàn)一個(gè)簡(jiǎn)潔版的Mini-Vue框架，應(yīng)該包含三個(gè)模塊：分別是：渲染系統(tǒng)模塊、可響應(yīng)式系統(tǒng)模塊、應(yīng)用程序入庫(kù)模塊，本文主要介紹的是渲染系統(tǒng)模塊的實(shí)現(xiàn)，需要的可以參考一下2023-07-07
intellij?idea+vue前端調(diào)試配置圖文教程
在Vue項(xiàng)目開發(fā)過程中,當(dāng)遇到應(yīng)用邏輯出現(xiàn)錯(cuò)誤,但又無法準(zhǔn)確定位的時(shí)候,知曉Vue項(xiàng)目調(diào)試技巧至關(guān)重要,debug是必備技能,這篇文章主要給大家介紹了關(guān)于intellij?idea+vue前端調(diào)試配置的相關(guān)資料,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了iview Upload組件多個(gè)文件上傳的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
el-table實(shí)現(xiàn)嵌套表格的展示功能(完整代碼)
el-table中在嵌套一個(gè)el-table,這樣數(shù)據(jù)格式就沒問題了,主要就是樣式,將共同的列放到一列中,通過渲染自定義表頭render-header,將表頭按照合適的寬度渲染出來,本文給大家分享el-table實(shí)現(xiàn)嵌套表格的展示功能,感興趣的朋友一起看看吧2024-02-02
在Vue中進(jìn)行數(shù)據(jù)分頁(yè)的實(shí)現(xiàn)方法
在前端開發(fā)中,數(shù)據(jù)分頁(yè)是一個(gè)常見的需求,特別是當(dāng)處理大量數(shù)據(jù)時(shí),Vue作為一款流行的JavaScript框架,提供了強(qiáng)大的工具和生態(tài)系統(tǒng)來實(shí)現(xiàn)數(shù)據(jù)分頁(yè),本文將介紹如何在Vue中進(jìn)行數(shù)據(jù)分頁(yè),以及如何設(shè)計(jì)一個(gè)通用的分頁(yè)組件,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了在Vue 中獲取下拉框的文本及選項(xiàng)值操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue表格首列相同數(shù)據(jù)合并實(shí)現(xiàn)方法
這篇文章主要介紹了Vue實(shí)現(xiàn)表格首列相同數(shù)據(jù)合并的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
elementui源碼學(xué)習(xí)仿寫一個(gè)el-tooltip示例
本篇文章記錄仿寫一個(gè)el-tooltip組件細(xì)節(jié)，從而有助于大家更好理解餓了么ui對(duì)應(yīng)組件具體工作細(xì)節(jié)，本文是elementui源碼學(xué)習(xí)仿寫系列的又一篇文章，后續(xù)空閑了會(huì)不斷更新并仿寫其他組件2023-07-07
Vue?ElementUI?table實(shí)現(xiàn)雙擊修改編輯某個(gè)內(nèi)容的方法
在實(shí)現(xiàn)表格單元格雙擊編輯功能時(shí),需使用@cell-dblclick事件來觸發(fā)雙擊操作,將單元格切換為input輸入框,通過ref引用和綁定失焦及回車事件來確認(rèn)編輯,同時(shí),需要處理編輯數(shù)據(jù)的更新和方法邏輯的完善2024-09-09
解決Vue.js Devtools未檢測(cè)到Vue實(shí)例的問題
在開發(fā)Vue.js應(yīng)用時(shí),Vue.js Devtools是一個(gè)不可或缺的調(diào)試工具,然而,有時(shí)我們可能會(huì)遇到“Vue.js not detected”的提示,這意味著Vue.js Devtools未能成功識(shí)別和連接到我們的Vue應(yīng)用,本文將詳細(xì)解析這個(gè)問題,并提供相應(yīng)的解決步驟與代碼示例,需要的朋友可以參考下2024-01-01