element-ui表单验证及双向绑定

记录一下重新合租组件过程中遇到的问题。

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.表单验证

表单验证出现不及时的情况（待补充）