Vue extend 的作用
Vue extend 是一个全局的api,基于vue 的构造函数去生成一个用于基于 Vue 构造函数创建一个"子类"(组件构造器),而这个子类也是一个 可以创建实例构造函数,所以在使用时也需要进行实例化操作
javascript
const MyComponent = Vue.extend({
// 组件选项
template: '<div>A custom component!</div>'
})
// 创建并挂载实例
new MyComponent().$mount('#app')
主要特点
-
创建可复用的组件构造器:
- 返回的不是组件实例,而是一个可以创建实例的构造函数
- 类似于 ES6 中的类继承机制
-
继承基础选项:
- 会继承传入选项对象中的所有 Vue 选项
- 可以添加新的选项或覆盖父类选项
-
与组件注册的关系:
Vue.component()
内部使用了Vue.extend
- 直接注册组件对象时,Vue 会自动调用
Vue.extend
使用场景
- 编程式创建组件
javascript
const Alert = Vue.extend({
template:`<div>Alert-Componend</div>`
})
new Alert().$mount(document.CreateElement('div'))
- 扩展已有组件
javascript
// 基础按钮组件
const BaseButton = Vue.extend({
template: `<button class="base-btn" @click="onClick">{{ text }}</button>`,
props: ['text'],
methods: {
onClick() {
this.$emit('click');
}
}
});
// 扩展出危险按钮(覆盖样式和文本)
const DangerButton = BaseButton.extend({
template: `<button class="base-btn danger-btn" @click="onClick">{{ text }}</button>`,
props: { text: { default: '危险操作' } }
});
// 全局注册扩展后的组件
Vue.component('danger-button', DangerButton);
- 高阶函数
javascript
function withLogger(WrappedComponent) {
return Vue.extend({
extends: WrappedComponent,
mounted() {
console.log('Component mounted')
}
})
}
4.与 Vue 实例结合的复杂场景
javascript
// 基础按钮组件
const BaseButton = Vue.extend({
template: `<button class="base-btn" @click="onClick">{{ text }}</button>`,
props: ['text'],
methods: {
onClick() {
this.$emit('click');
}
}
});
// 扩展出危险按钮(覆盖样式和文本)
const DangerButton = BaseButton.extend({
template: `<button class="base-btn danger-btn" @click="onClick">{{ text }}</button>`,
props: {
text: {
default: '危险操作'
}
}
});
// 全局注册扩展后的组件
Vue.component('danger-button', DangerButton);
注意事项
- vue3 已经移除了,
defineComponent
+steup
取代 - 返回的是组件实例的构造函数,需要通过
new
关键字实例化,在通过$mount
挂载