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

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

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

Vue Vue.extend()的使用

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

應(yīng)用場(chǎng)景

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

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

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

基礎(chǔ)用法

Vue.extend( options )

參數(shù)：{Object} options
用法：使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個(gè)“子類”。參數(shù)是一個(gè)包含組件選項(xiàng)的對(duì)象；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í)例，并掛載到一個(gè)元素上。
new Profile().$mount('#mount-point')

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

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

第二種寫法

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

// 1. 定義一個(gè)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"}) // 生成一個(gè)實(shí)例，并且掛載在 #app 上