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

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

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

Vue Vue.extend()的使用

Vue.extend 屬于 Vue 的全局 API，在實際業(yè)務開發(fā)中我們很少使用，因為相比常用的 Vue.component 寫法使用 extend 步驟要更加繁瑣一些。但是在一些獨立組件開發(fā)場景中，Vue.extend + $mount 這對組合是我們需要去關注的。

應用場景

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

但是這樣做會有幾個缺點：

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

基礎用法

Vue.extend( options )

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

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

// 結果如下：
<p>Walter White aka Heisenberg</p>

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

第二種寫法

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

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

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