javascript
import { Select } from "element-ui";
const CashSelect = Vue.extend(Select).extend({
methods: {
handleClearClick(event) {
console.log(event.target)
this.deleteSelected(event);
},
}
})
🔎 1. Vue.extend(Select)
Vue.extend
是 Vue 2 提供的一个 构造器创建方法 ,它会基于一个组件选项对象(或另一个已存在的 Vue 构造器)生成一个 新的子类。Select
在这里是一个 已有的 Vue 组件 (比如来自 element-ui 的<el-select>
)。- 所以
Vue.extend(Select)
相当于把Select
包装成一个新的组件构造函数。
🔎 2. .extend({ ... })
- 这里再调用
.extend({ ... })
,表示在Select
的基础上 继续扩展选项。 - 也就是说,
CashSelect
是继承了Select
的功能,并在此基础上加上了新的methods
。
换句话说,它相当于:
csharp
const CashSelect = Vue.extend({
extends: Select, // 继承 Select 组件
methods: {
handleClearClick(event) {
console.log(event.target)
this.deleteSelected(event);
},
},
})
🔎 3. this.deleteSelected(event)
- 说明
Select
组件本身实现了deleteSelected
这个方法(比如 element-ui 的 select 内部方法)。 - 在子类中可以直接调用父类的方法,覆盖或者补充逻辑。
🔎 4. 用法总结
Vue.extend(Select).extend({ ... })
的效果就是 基于已有组件 Select 继续扩展,而不是从零写一个新组件。
你可以把它理解为 继承+扩展:
Vue.extend(Select)
→ 基于Select
生成一个子类。.extend({ methods: { ... } })
→ 在子类基础上继续添加新的方法。
最终 CashSelect
仍然是一个组件构造器,可以在模板里用 <cash-select>
来使用。