Vue.extend是Vue.js提供的一個(gè)API，它可以讓我們創(chuàng)建一個(gè)新的構(gòu)造函數(shù)，通常用于實(shí)現(xiàn)一個(gè)基礎(chǔ)組件，然后我們可以在其基礎(chǔ)上派生出更多的子組件。

例如我們有一個(gè)基礎(chǔ)組件myComponent：

Vue.component('myComponent',{
template:'<div><button @click="onClick">{{text}}</button></div>',
props:{
text:{
type:String,
default:'click me'
}
},
methods:{
onClick(){
this.$emit('click');
}
}
})

這個(gè)組件定義了一個(gè)按鈕和一個(gè)text屬性，當(dāng)按鈕被點(diǎn)擊時(shí)會(huì)觸發(fā)click事件。

現(xiàn)在我們可以通過(guò)Vue.extend來(lái)創(chuàng)建一個(gè)派生組件myComponentA：

const myComponentA = Vue.extend({
template:'<myComponent @click="onClick"></myComponent>',
methods:{
onClick(){
console.log('clicked from child');
}
}
})
new Vue({
el:'#app',
components:{myComponentA},
})

在這個(gè)派生組件中，我們直接使用了myComponent作為模板并監(jiān)聽(tīng)了它的click事件，當(dāng)該事件被觸發(fā)時(shí)會(huì)輸出"clicked from child"。

最后，在HTML中我們只需要調(diào)用myComponentA即可：

<div id="app">
<myComponentA text="click me from child"></myComponentA>
</div>

這樣我們就創(chuàng)建了一個(gè)新的派生組件，并重寫(xiě)了它的click事件，同時(shí)還保留了基礎(chǔ)組件的功能。