记一个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> 来使用。

相关推荐
RaidenLiu3 小时前
Riverpod 3:组合与参数化的进阶实践
前端·flutter
布兰妮甜3 小时前
封装Element UI中el-table表格为可配置列公用组件
vue.js·ui·el-table·前端开发·element-ui
jason_yang3 小时前
vue3自定义渲染内容如何当参数传递
前端·javascript·vue.js
年年测试3 小时前
Browser Use 浏览器自动化 Agent:让浏览器自动为你工作
前端·数据库·自动化
维维酱3 小时前
React Fiber 架构与渲染流程
前端·react.js
gitboyzcf3 小时前
基于Taro4最新版微信小程序、H5的多端开发简单模板
前端·vue.js·taro
姓王者3 小时前
解决Tauri2.x拖拽事件问题
前端
williamdsy3 小时前
实战复盘:pnpm Monorepo 中的 Nuxt 依赖地狱——Unhead 升级引发的连锁血案
vue.js·pnpm
冲!!4 小时前
vue3存储/获取本地或会话存储,封装存储工具,结合pina使用存储
前端·javascript·vue.js