记录一下重新合租组件过程中遇到的问题。
1.双向绑定。
父组件向子组件传递的值不可以在子组件中改变,所以v-model实现该组件。代码如下
父组件:
<c-input v-model="item"></c-input>
子组件:
<template>
<el-form-item :label="label" :prop="prop"
v-bind:style="{width:width}">
<el-input ref="input" v-bind:value="value" v-on:input.native="updateValue($event.target.value)" />
</el-form-item>
</template>
<script>
export default {
model: {
prop: 'value',
event: 'input'
},
props: {
label: {
type: String,
default: ''
},
value: {
type: String,
default: ''
},
prop: {
type: String,
default: null
},
required: {
type: Boolean,
default: false
},
width: {
type: String,
default: '200px'
}
},
data() {
return {
}
},
methods: {
updateValue(val) {
this.$emit('input', val)
}
},
}
</script>
此方法实现双向绑定。
用以上方法实现input控件的双向绑定,但是再单选radio 或者下拉框中,使用以上方法可能数据不对,这时用element-ui给出的方法@change,当控件的值发生变化时,提交该值到父组件
2.表单验证
表单验证出现不及时的情况(待补充)