element表单组件怎么使用,elementui列表组件

　　本文主要介绍元素的表单组件的相关信息。通过示例代码进行了非常详细的介绍，对于大家的学习或者工作都有一定的参考价值。有需要的朋友下面和边肖一起学习。

element表单及代码的展示

　　详细可以看元素形态官网。

结构、功能分析

　　通过介绍和源代码可以发现，表单有三个功能：收集、校验、提交数据。

　　他的基本结构如下：

　　El-form:model= rule form :rules= rules ref= rule form

　　El-form-item标签=帐号属性=名称

　　el输入v-model=ruleForm.name/el输入

　　/El-表单-项目

　　/el格式

　　一个组件的一般特征是：高内聚、低耦合。根据这个特点，我们要写的组件应该是负责一个功能(功能单一、提高复用性)的模块，同时减少它们交互带来的不利影响。

　　分析上述源代码的基本结构：

　　form::model和:rules分别用于接受数据模型和校验规则。它们用ref属性注册，以便于后续的DOM操作。

　　item：通过prop获取当前数据的值

　　input：双向绑定管理数据

　　然后你就可以知道他们各自的功能是收集、验证和提交数据。

　　那么我们就用我们最常用的登录注册函数，从小到大写代码吧。

input组件实现

　　首先目标很明确：输入组件只需要实现双向绑定，可以管理数据。

　　双向绑定需要使用v-model。在过去的学习过程中，v-model的语法糖其实可以拆分为v-bing:value和v-on:input两种，在绑定数据时可以同时监控事件。

　　下面粘贴一些代码截图，方便后面的记录：

　　父组件：

　　子组件：

　　首先明确输入需要实现的功能：通过双向绑定维护数据

　　那么我们只需要知道双向绑定的价值是什么，被监控的事件是什么。

　　为了方便管理数据，输入子组件中绑定的值应该是父组件传入的值。

　　值得注意的是，子组件的输入事件一般是单向数据流，所以当数据发生变化时，只需要向父组件派生一个事件，然后监听父组件传入的值，就可以改变数据，实现从父到子，从子到父的单向循环传递。

item组件的实现

　　父组件：

　　子组件：

　　项目子组件需要完成以下功能：验证。

　　先写个模板吧，验证功能以后再完善。

form组件的实现

　　父组件：

　　子组件：

　　表单的功能：接收数据和检查规则

　　因此，这两个属性需要声明，以便于接收。

　　基本框架已经完成，下面是核心问题。

核心问题

　　表单中接受的数据和规则，但是需要用到的地方在项中，那么我们如何传递值呢？=provide和inject

　　目前，我们需要使用的唯一值是imformation和rules，但是为了方便起见，我们传递了这个值，这样我们就可以通过这个获得子级中的父级和更高级别的实例。

　　在form组件里加入provide

　　其他需要用的数据的组件里加入inject

　　使用示例：

　　(2)通知并检查。

　　向输入组件中的父项发送一个事件，通知它进行检查。

　　在item中接收此事件并实现它。

　　在validate方法中，首先，我们需要获得验证规则和要验证的值。那么我们之前已经通过provide和inject传递了值。现在给物品加一个道具，通过prop定位就可以得到想要的数值。

　　接下来我们安装一个第三方库npm i async-validator -S(可以执行很多异步验证规则)。

　　异步验证器的使用

　　然后在项目中使用它。

　　其实这里基本就完成了。为了更好地利用它，通常会有一个提交按钮，然后点击它进行全局验证。

提交功能

　　父组件：

　　表单子组件：

　　我在这儿结束了。感谢您的观看。我只是一只鸡。如果你发现有什么不对的地方，请给我你的宝贵意见，并立即纠正我。谢谢你。

总结

　　这就是本文关于元素形式组件的全部内容。有关元素表单组件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。