Vue.extend( options )
-
參數(shù)：
{Object} options
-
用法：
使用基礎(chǔ) Vue 構(gòu)造器畔咧，創(chuàng)建一個(gè)“子類”斤贰。參數(shù)是一個(gè)包含組件選項(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í)例，并掛載到一個(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') 來掛載到指定的元素上忿峻。
為什么使用 extend
在 vue 項(xiàng)目中薄啥，我們有了初始化的根實(shí)例后，所有頁面基本上都是通過 router 來管理逛尚，組件也是通過 import 來進(jìn)行局部注冊垄惧，所以組件的創(chuàng)建我們不需要去關(guān)注，相比 extend 要更省心一點(diǎn)點(diǎn)绰寞。但是這樣做會(huì)有幾個(gè)缺點(diǎn)：
組件模板都是事先定義好的到逊，如果我要從接口動(dòng)態(tài)渲染組件怎么辦？
所有內(nèi)容都是在 #app 下渲染滤钱，注冊組件都是在當(dāng)前位置渲染觉壶。如果我要實(shí)現(xiàn)一個(gè)類似于 window.alert() 提示組件要求像調(diào)用 JS 函數(shù)一樣調(diào)用它，該怎么辦件缸？
這時(shí)候铜靶，Vue.extend + vm.$mount 組合就派上用場了。
簡單示例
我們照著官方文檔來創(chuàng)建一個(gè)示例：
import Vue from 'vue'
const testComponent = Vue.extend({
template: '<div>{{ text }}</div>',
data: function () {
return {
text: 'extend test'
}
}
})
然后我們將它手動(dòng)渲染：
const extendComponent = new testComponent().$mount()
這時(shí)候他炊，我們就將組件渲染掛載到 body 節(jié)點(diǎn)上了争剿。
我們可以通過 $el 屬性來訪問 extendComponent 組件實(shí)例：
document.body.appendChild(extendComponent.$el)
如果想深入掌握 extend 知識已艰，不妨做一個(gè) alert 組件來實(shí)現(xiàn)類似于原生的全局調(diào)用。
在elmentUI組件中el-mesage組件就使用了vue-extend蚕苇。
