입력 구성 요소
특징 :
- 데이터 이중 구속
- 공지 사항 FormItem의 구성 요소 확인
<template>
<div>
<input :type="type" :value="value" @input="onInput" v-bind="$attrs" >
</div>
</template>
<script>
export default {
inheritAttrs:false,
props:{
value:{
type: String,
default: ''
},
type:{
type: String,
default: 'text'
},
},
methods:{
onInput(e){
this.$emit('input',e.target.value);
// 让父组件自己派发自己监听该valid事件进行校验。
this.$parent.$emit('valid');
}
}
}
</script>$attrs그리고 v-bind="$attrs"사용
$attrs뷰는 내장 속성 외부 전송을 저장하는 데 사용되지만, 구성 요소 속성에 소품을받지 못했습니다.- 이러한 속성이 아닌 소품 특성 :
1 자동 루트 요소 어셈블리에 추가됩니다.
2. 기본적으로 비 소품의 특성 속성은 루트 요소 어셈블리의 같은 이름의 내용을 덮어 쓰게됩니다. 들어style및class특수 처리가 : 병합 (하지만 같은 이름의 스타일을 경우 덮어 쓰기됩니다)
이 아닌 소품 조립 기능의 루트 요소를 상속하지 않으려면 3, 당신은 구성 요소 구성 항목을 구성 할 수 있습니다inheritAttrs:false(API는 스타일과 클래스에 영향을주지 않습니다)
v-bind="$attrs"그것은는 $attrs해체 할당, 해체의 방법 :key="value"형태.
FormItem의 구성 요소
특징 :
- 확인
- 라벨 표시
- 오류 표시
<template>
<div>
<label v-if="label">{{label}}</label>
<slot></slot>
<p v-if="error">{{error}}</p>
</div>
</template>
<script>
import Schema from 'async-validator'; // 校验包
export default {
inject:['form'],
props:{
label:{
type:String,
default:''
},
prop:{
type:String,
default:''
}
},
data(){
return {
error:''
}
},
mounted(){
this.$on('valid',()=>{
this.validate();
})
},
methods:{
validate(){
const rules = this.form.rules[this.prop];
const value = this.form.model[this.prop];
const schema = new Schema({[this.prop]:rules});
// 返回Promise<Boolean>
return schema.validate({[this.prop]:value},(errors)=>{
if(errors){
this.error = errors[0].message;
}else{
this.error = '';
}
})
}
}
}
</script> 양식 구성 요소
특징 :
- 값을 제공
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
provide(){
return {
form:this // 把form组件实例传给后代，后代可以通过该实例访问该组件上的属性 model、rule ...
}
},
props:{
model:{
type:Object,
reuqired:true
},
rules:{
type:Object,
}
},
methods:{
validate(cb){
const checkRes = this.$children
.filter(item => item.prop)
.map(item => item.validate());
Promise.all(checkRes)
.then(()=>cb(true))
.catch(()=>cb(false));
}
}
}
</script>범용 라이브러리 개발 및 간 수준은 일반적으로 대량 참여의 방법을 사용 provide / inject
- 조상은 세트가
provide받는 유사한 구성 항목,data사용하지만 데이터가없는 내 자신의 사용을 위해, 미래 세대에 사용됩니다. 자손에 의한
inject설정 항목을 제공하는 선조 데이터를 취득.inject: ['form'] // 祖代provide中的key值하지 깊은 수준의 필요에 경우 타사 라이브러리의 도입은, 같은 vuex 같은 방법으로 피할 수
props성가신 전송 접근.
용도
<template>
<div>
<Form :model="model" :rules="rules" ref="myform">
<FormItem label="用户名" prop="username">
<Input v-model="model.username" placeholder="输入用户名" @ev="func" />
</FormItem>
<FormItem label="密码" prop="password" >
<Input v-model="model.password" placeholder="输入密码" type="password" @ev="func" />
</FormItem>
<FormItem >
<button @click="submitForm('myform')">提交</button>
</FormItem>
</Form>
</div>
</template>
<script>
import Input from '@/components/form/Input';
import Form from '@/components/form/Form';
import FormItem from '@/components/form/FormItem';
export default {
components:{
Input,
Form,
FormItem
},
data(){
return{
model:{
username:'',
password:'',
},
rules:{
username:[{required:true,message:'用户名必填'}],
password:[{required:true,message:'密码必填'}],
},
}
},
methods:{
submitForm(form){
this.$refs[form].validate(valid=>{
if(valid){
alert('校验通过');
}else{
alert('校验失败');
}
})
}
}
}
</script> 문제의 개요
- 왜 폼의 데이터 모델 모델은 무엇입니까?
그들은 매우 복잡 할 것이다 FormItem의 작성하는 경우 검증을 용이하게하기 위해, FormItem의 내부 검증은 많은있을 수 있습니다에서. - 왜 FormItem의 소품에 쓰기?
체크에서 수행뿐만 아니라,이 키 소품을 통해 규칙을 얻을 수있는 모델의 부분을 결정하기 위해.