Vue2中extend 的作用

Vue extend 的作用

Vue extend 是一个全局的api,基于vue 的构造函数去生成一个用于基于 Vue 构造函数创建一个"子类"(组件构造器),而这个子类也是一个 可以创建实例构造函数,所以在使用时也需要进行实例化操作

javascript 复制代码
const MyComponent = Vue.extend({
  // 组件选项
  template: '<div>A custom component!</div>'
})

// 创建并挂载实例
new MyComponent().$mount('#app')

主要特点

  1. 创建可复用的组件构造器‌:

    • 返回的不是组件实例,而是一个可以创建实例的构造函数
    • 类似于 ES6 中的类继承机制
  2. 继承基础选项‌:

    • 会继承传入选项对象中的所有 Vue 选项
    • 可以添加新的选项或覆盖父类选项
  3. 与组件注册的关系‌:

    • Vue.component() 内部使用了 Vue.extend
    • 直接注册组件对象时,Vue 会自动调用 Vue.extend

使用场景

  1. 编程式创建组件
javascript 复制代码
const Alert = Vue.extend({
        template:`<div>Alert-Componend</div>`
})
new Alert().$mount(document.CreateElement('div'))
  1. 扩展已有组件
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);
  1. 高阶函数
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 挂载
相关推荐
jay神4 小时前
基于SpringBoot + Vue 的宠物领养管理系统
vue.js·spring boot·宠物
卡卡_罗特4 小时前
前端项目部署nginx代理
前端·vue.js·nginx
Lsx_5 小时前
前端数据可视化:基于Vue3封装 ECharts 的最佳实践
前端·vue.js·echarts
不一样的少年_6 小时前
Onion CLI:3秒建项目,10秒出包的Chrome插件开发脚手架神器
前端·vue.js·chrome
前端刚哥6 小时前
el-table 表格封装公用组件,表格列可配置
前端·vue.js
qb8 小时前
vue3.5.18源码:深入watch api底层实现
前端·vue.js·架构
zzywxc7879 小时前
如何通过 AI IDE 集成开发工具快速生成简易留言板系统
javascript·ide·vue.js·人工智能·spring cloud·架构·dubbo
Juchecar9 小时前
Vite = 让 Vue 开发像写 HTML 一样快的现代工具
前端·vue.js
Juchecar9 小时前
如何实现Node.js查看 Vue3 项目请求日志
前端·vue.js