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