Vue 2 中 Vue.extend 用于创建可复用组件构造器，需定义 data 为函数、禁用 el，注册后通过 Vue.component 全局使用，支持 props 通信与响应式更新。

Vue 2 中用 Vue.extend 创建全局可复用的构造器组件，核心是“先造构造器、再注册为全局、最后在模板中声明使用”。它不是直接挂载的实例，而是能反复生成新组件的“工厂函数”，适合需要统一行为但独立状态的场景（比如多个并存的提示框、弹窗）。

构造器定义：注意 data 必须是函数，不能写 el

组件选项对象写法和 new Vue() 类似，但有两个硬性约束：

• data 必须返回一个新对象，防止多个实例共享同一份数据
• 不能设置 el 选项，挂载由使用者控制（注册后由 Vue 自动处理）
• 支持 template、props、methods、computed 等常规选项

示例：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

const AlertBox = Vue.extend({
  template: `

{{ msg }}

`,
  props: ['msg'],
  data() {
    return { visible: true };
  },
  methods: {
    hide() { this.visible = false; }
  }
});

注册为全局组件：调用 Vue.component

把构造器传给 Vue.component，指定一个自定义标签名，之后所有 Vue 实例都能识别该标签：

• 注册后，Vue 内部会缓存这个构造器（_Ctor 池），重复注册同名组件不会重复创建
• 注册名建议用短横线格式（如 alert-box），符合 HTML 自定义元素规范

示例：

Vue.component('alert-box', AlertBox);

之后就可以在任意 Vue 实例模板中这样用：

配合 props 实现动态内容传递

props 是构造器与外部通信的主要方式，必须显式声明：

• 在构造器中写 props: ['msg', 'type']，才能通过 传入值
• propsData 是实例化时用的（如手动 new AlertBox({ propsData: {...} })），注册为全局组件后不走这一步，直接靠模板绑定
• props 值是响应式的，但只在初始化时注入；如需运行时更新，应通过事件或外部 state 控制

为什么不用 Vue.component 直接传对象？

你当然可以写 Vue.component('x', { template: '...' }) —— Vue 内部会自动调用 Vue.extend 包装它。但显式使用 Vue.extend 的价值在于：

• 可提前定义、复用同一个构造器多次（比如同时注册 alert-box 和 confirm-box，共用基础逻辑）
• 便于封装带方法的组件（如 instance.show()、instance.close()），方便后续扩展
• 避免箭头函数导致 this 失效（构造器内 methods/data 必须用普通函数）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！