记一个Vue.extend的用法

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

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

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

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

相关推荐
南玖i1 小时前
vue3 通过 Vue3DraggableResizable实现拖拽弹窗,可修改大小
前端·javascript·vue.js
excel1 小时前
Web发展与Vue.js导读
前端
YAY_tyy1 小时前
Three.js 开发实战教程(五):外部 3D 模型加载与优化实战
前端·javascript·3d·three.js
Zuckjet_4 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_863801465 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d
珍宝商店6 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown6 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
gnip7 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿8 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
lumi.9 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js