记一个Vue.extend的用法

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。

换句话说，它相当于：

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 继续扩展，而不是从零写一个新组件。

你可以把它理解为 继承+扩展：

1. Vue.extend(Select) → 基于 Select 生成一个子类。
2. .extend({ methods: { ... } }) → 在子类基础上继续添加新的方法。

最终 CashSelect 仍然是一个组件构造器，可以在模板里用 <cash-select> 来使用。