快捷導(dǎo)航

Vue中Vue.extend()的使用詳解及說明

更新時間：2025年06月12日 10:12:33 作者：前端賈公子

這篇文章主要介紹了Vue中Vue.extend()的使用詳解及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

Vue Vue.extend()的使用

Vue.extend 屬于 Vue 的全局 API，在實(shí)際業(yè)務(wù)開發(fā)中我們很少使用，因?yàn)橄啾瘸Ｓ玫?Vue.component 寫法使用 extend 步驟要更加繁瑣一些。但是在一些獨(dú)立組件開發(fā)場景中，Vue.extend + $mount 這對組合是我們需要去關(guān)注的。

應(yīng)用場景

在 vue 項(xiàng)目中，初始化的根實(shí)例后，所有頁面基本上都是通過 router 來管理，組件也是通過 import 來進(jìn)行局部注冊，所以組件的創(chuàng)建不需要去關(guān)注，相比 extend 要更省心一點(diǎn)點(diǎn)。

但是這樣做會有幾個缺點(diǎn)：

組件模板都是事先定義好的，如果我要從接口動態(tài)渲染組件怎么辦？
所有內(nèi)容都是在 #app 下渲染，注冊組件都是在當(dāng)前位置渲染。如果我要實(shí)現(xiàn)一個類似于 window.alert() 提示組件要求像調(diào)用 JS 函數(shù)一樣調(diào)用它，該怎么辦？
這時候，Vue.extend + vm.$mount 組合就派上用場了。

基礎(chǔ)用法

Vue.extend( options )

參數(shù)：{Object} options
用法：使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個“子類”。參數(shù)是一個包含組件選項(xiàng)的對象；data 選項(xiàng)是特例，需要注意：在 Vue.extend() 中它必須是函數(shù)；

<div id="mount-point"></div>
// 創(chuàng)建構(gòu)造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 創(chuàng)建 Profile 實(shí)例，并掛載到一個元素上。
new Profile().$mount('#mount-point')

// 結(jié)果如下：
<p>Walter White aka Heisenberg</p>

可以看到，extend 創(chuàng)建的是 Vue 構(gòu)造器，而不是我們平時常寫的組件實(shí)例，所以不可以通過 new Vue({ components: testExtend }) 來直接使用，需要通過 new Profile().$mount(’#mount-point’) 來掛載到指定的元素上。

第二種寫法

可以在創(chuàng)建實(shí)例的時候傳入一個元素，生成的組件將會掛載到這個元素上，跟 $mount 差不多。

// 1. 定義一個vue模版 
let  tem ={
    template:'{{firstName}} {{lastName}} aka {{alias}}',
    data:function(){    
    return{    
	    firstName:'Walter',   
	    lastName:'White',    
	    alias:'Heisenberg'
    }
}

// 2. 調(diào)用
const TemConstructor = Vue.extend(tem) 
const intance = new TemConstructor({el:"#app"}) // 生成一個實(shí)例，并且掛載在 #app 上