Notes on element's form components

Element form and code display

For details, please see the official website of element form

Structural and functional analysis

Through the introduction and source code, we can find that the form has three functions: collecting, verifying, and submitting data .

Its basic structure is as follows:

<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
 <el-form-item label="Account" prop="name">
 <el-input v-model="ruleForm.name"></el-input>
 </el-form-item>
</el-form>

The characteristics of general components are: high cohesion and low coupling . According to this characteristic, the components we want to write should be one module responsible for one function ( single function, improve reusability ), while reducing the adverse effects of interactions between them.

Analyze the basic structure of the above source code:

form : :model and :rules are used to accept data models and validation rules respectively, and are registered using the ref attribute to facilitate subsequent DOM operations

item: Get the value of the current data through prop

Input: Two-way binding management data

Then we can know that their respective functions are to collect, verify and submit data

Then let's use our most common login and registration functions to write the code from small to large

Input component implementation

First, clarify the goal: the input component only needs to implement two-way binding and play the role of managing data

The implementation of two-way binding requires the use of v-model. In the previous learning process, the v-model syntax sugar can actually be split into v-bing:value and v-on:input , which can listen to events at the same time when binding data.

Paste some code screenshots below for easy recording:

Parent component:

Subcomponents:

First, clarify the functions that Input needs to implement: Maintain data through two-way binding

Then you just need to understand what the two-way binding value and the monitored events are.

In order to facilitate data management, the value bound in the input subcomponent should be the value passed in by the parent component

It is worth noting that in the input event of the child component, it is generally a one-way data flow. So when the data changes, you only need to derive an event to the parent component, and then change the data by listening to the value passed in by the parent component, thus realizing a one-way cycle of parent-to-child and child-to-parent.

Implementation of item component

Parent component:

Subcomponents:

The functions that the item subcomponent needs to complete are: verification

Let's write a template first, and then improve the verification function later.

Implementation of form component

Parent component:

Subcomponents:

Functions implemented by form: receiving data and verification rules

So you need to declare these two properties to facilitate receiving

The basic framework is complete, the following is the core issue

Core Issues

① The data and rules received in the form, but the place where they are needed is in the item, so how do we pass the value down => provide and inject

Although the values ​​we are going to use at present are only imformation and rules, for convenience, the value we pass is this, so that we can use this to get the parent and higher-level instances in the child in the future.

Add provide to the form component

Add inject to other components that need data

Example:

②Notify verification and conduct verification

In the input component, dispatch an event to its parent item to notify it to verify

Receive this event in item and implement

In the validate method, we first need to obtain the validation rules and the values ​​that need to be validated. We have already passed down the values ​​through provide and inject. Now by adding a prop to the item, we can get the value we want through prop positioning.

Next, we install a third-party library npm i async-validator -S (which can execute many asynchronous validation rules)

async-validator usage

Then introduce it in item

At this point, it is basically completed. For better use, there is usually a submit button, which will be clicked for global verification.

Submit Function

Parent component:

form subcomponent:

This is the end of it. Thank you for watching. I am just a newbie. If you find anything wrong, please give me your valuable suggestions and correct me immediately. Thank you.

Summarize

This is the end of this article about the element form component. For more relevant element form component content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!