Rookie huo Xiaoye posted his first article on the nuggets. thank you

The project address

Use in the Official Element UI documentation

<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">< el-form-item label=" active name" prop="name"> <el-input V-model =" ruleform. name"></el-input> </el-form-item> </<el-form> <script> export default { data() { return { ruleForm: { name: '', }, rules: { name: [ { required: true, message: 'Please enter the activity name ', trigger: 'blur'}, {min: 3, Max: 5, message:' length between 3 and 5 characters ', trigger: 'blur'}],}}; }, methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {// Validate}}); }, } } </script>Copy the code

From the official documentation, we can see that there are three components: el-Form, el-form-item, and el-Input.

implementation

1. Create an input. vue component in component

The following code

// app.vue

<template>
	<div id="app">
		<my-input type="text" :value="name"></my-input>
	</div>
</template>

<script>
	import MyInput from "./components/Input";
	export default {
		name: "app",
		components: {
			MyInput
		},
		data() {
			return {
				info:{
					name:"Huo Xiaoye"}}}}; </script> // Input.vue <template> <div id="inpt">
		<input :type="type" :value="value" />
	</div>
</template>

<script>
	export default {
		props: {
			label: {
				type: String,
				required: true,
			},
			prop: {
				type: String,
				required: true,
			}
		}
	}
</script>

Copy the code

  • App.vue () {app.vue () {app.vue () {app.vue () {app.vue () {app.vue () {app.vue () {app.vue () {app.vue () {app.vue () {app.vue ();

    • Method one: The child component uses this.Emit (fnName, V), parent component registration method 
      	// Input.vue
	<input :type="type" :value="value" @input="onInput" />
	methods: {
		onInput(e) {
			this.$parent.$emit("inpChange", e.target.value)
		}
	}
	// app.vue
	mounted() {
		this.$on("inpChange", this.handleInput)
	},
	
	methods: {
		handleInput(v) {
			// console.log(v)
			this.name = v
		}
	}
	
Copy the code
    • Method 2: The parent component passes a method to the child component, which calls the method and changes the value of the parent component
    • Method 3: Use v-model binding values directly 
      // app.vue
<my-input type="text" v-model="name"></my-input>
Copy the code

Now, let’s finish the first step.

2 Create a formItem. vue component in component

In the official document example, the FormItem binds two properties, label and prop. Label defines the label for the input element. So what does prop do?? The answer is rule validation

	// FormItem.vue
	<template>
		<div class="item">
			<label>{{label}}</label>
			<slot></slot>
			<p v-show="isErr">{{promptMessage}}</p>
		</div>
	</template>
	
	<script>
		export default {
			props: {
				label: {
					type: String,
					required: true,
				},
				prop: {
					type: String,
					required: true,}},data() {
				return {
					isErr: false,
					promptMessage: ""
				}
			}
		}
	</script>
	
	<style>
	</style>
	
	
	// app.vue
	<my-form-item label="Name:" prop="name">
		<my-input type="text" v-model="name"></my-input>
	</my-form-item>
Copy the code

3 Create a form. vue component in Component

Here we need to pass two properties, one model and the other rules

	// app.vue
	<div id="app">
		<h1>{{info.name}}</h1>
		<my-form-item label="Name:" prop="name">
			<my-input type="text" v-model="info.name"></my-input>
		</my-form-item>
	</div>

	// Form.vue
	<template>
		<div>
			<form action="">
				<slot></slot>
			</form>
			
		</div>
	</template>
	
	<script>
		export default {
			props: {
				model: {
					type: Object,
					required: true,
				},
				rules: {
					type: Object,
					required: true,
				}
			}
		}
	</script>

Copy the code

4 Verification

Validation rules we pass to the form. vue component, but the component that validates is the FormItem component, which involves things like provide and inject between sub-components. The code is as follows:

	// Form.vue
	provide() {
		return {
			myForm: this}}/ / FormItem. Vue receiving
	inject:["myForm"].Copy the code

The next step is validation. When the Input component makes Input, we call the FormItem component’s methods to validate the Input. Element UI validates using the Async-Validator library

	// Input.vue
	methods: {
		onInput(e) {
			this.$emit('input',e.target.value);
			this.$parent.$emit('validate')}}// FormItem.vue
	mounted() {
		this.$on("validate".this.validator)
	},
	methods: {
		validator() {
			const rules = this.myForm.rules[this.prop]; / / rules
			const value = this.myForm.model[this.prop]; / / field values
	
			const descriptor = {
				[this.prop]: rules
			};
			const schema = new Schema(descriptor);
			schema.validate({
				[this.prop]: value
			}, errors => {
				if (errors) {
					this.promptMessage = errors[0].message;
					this.isErr = true;
				} else {
					this.promptMessage = ' ';
					this.isErr = false; }}}})Copy the code