如何实现Vue中的自定义表单组件？

本文共计2700个文字，预计阅读时间需要11分钟。

目录

1.需求分析

2.表单功能简单实现

3.抽象验证规则

4.支持 v-model 双向绑定

5.使用 $attrs 支持默认属性

6.父组件调用子组件中的方法

1. 需求分析 我们需要将我们的表单组件为两个部分。

目录

• 1. 需求分析
• 2. 表单功能的简单实现
• 3. 抽象验证规则
• 4. 支持 v-model 双向绑定
• 5. 使用 $attrs 支持默认属性
• 6. 父组件调用子组件中的方法

1. 需求分析

我们要把我们的表单组件分成两个部分，一个是item部分，一个是整体的 form 部分，form部分由item和button提交按钮共同组成。

在我们单击每个输入框时会触发每一个item的验证规则，然后点击登录按钮会验证整个 form 。

2. 表单功能的简单实现

我们先去 bootstrap 文档里找到 form 表单然后把它的模板代码 copy 过来，当然前提是我们首先要在项目中安装 BootStrap。