基于Vue构造器创建Form组件的通用解决方案

最新推荐文章于 2025-07-10 20:06:27 发布

原创

最新推荐文章于 2025-07-10 20:06:27 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

本文探讨了如何使用Vue.extend将Form组件转化为函数，以解决多个表单状态管理和组件化的问题。通过在组件方法中创建和注销表单实例，实现了更灵活的表单管理。此外，通过mixins引入公有数据和方法，简化了表单组件的开发，该方法同样适用于toast、alert、confirm等组件的开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前端平常的业务中，无论是官网、展示页还是后台运营系统都离不开表单，它承载了大部分的数据采集工作。所以如何更好地实现它，是平常工作中的一个重要问题。

在应用Vue框架去开发业务时，会将页面上每个独立的可视/可交互区域拆分为一个组件，再通过多个组件的自由组合来组成新的页面。例如

<template>
  <header></header>
  ...
  <content></content>
  ...
  <footer></footer>
</template>

当用户的某个行为页面触发表单时（例如注册、建立内容等），我们会在页面中弹出一个From组件。通常的做法是在 template 中填入一个组件用于开发注册表单，并通过控制 data 中的 UI.isOpen 来对其 display 进行控制。

<template>
  <header></header>
  ...
  <content></content>
  ...
  <footer></footer>
  ...
  <register-form v-if="UI.isOpen">
    <form-item></form-item>
    ...
    <submit-button></submit-button>
  </register-form>
</template>

这样开发有一点优势，Form组件与原组件可以通过 prop 以及 event 方便通信以及数据传递。但是也会有以下几个缺陷：

当前组件的 data 必须要有 UI.isOpen 来控制表单，如果存在多个表单时，就会有大段的代码来维护表单的状态；
如果多个 button 触发同一个表单时，可能需要对表单的 data 进行重置；
与组件化思想相违背，表单不属于当前页面，它只是由于用户行为触发的结果。
为了解决以上缺陷，并且还能具备方便通信的优势，本文选择用 Vue.extend 将原有组件转化为函数，并维护在当前组件的 method 中，当用户触发时，在页面中挂载，关闭时自动注销。

APP组件
<template>
  <div id="app">
    <el-button 
        type="primary" icon="el-icon-edit-outline"
        @click="handleClick"
    >注册</el-button>
  </div>
</