Vue 自定义表单验证组件

先看代码

<template>
  <div class="ys-address-input" :class="{'short':shorter}">
      <span>{{label}}</span>
      <input type="text" :value="value" @input="$emit('input',$event.target.value)" @blur="$emit('validate')" title="" required :placeholder="placeHolder">
  </div>
</template>

<script>
  export default {
    name: "AddressInput",
    props:{
      label:String,
      placeHolder:String,
      shorter:{
        type:Boolean,
        default:false
      },
      value:[String,Number]
    }
  }
</script>

<style lang="less" scoped>
//etc
</style>

为了能够在这组件上进行v-model，像这样

<AddressInput v-model="username" @validate="validate" :label="'联系人'" shorter :place-holder="'请输入用户名'"/>

在组件的定义中就需要将value作为props传进去，通过$emit input再抛出