带有props和v-model的自定义包装器组件

<template>
  <div>
    <input
      :value="value"
      @input="$emit('input', $event.target.value)"
      @blur="validate"
    />
    <span v-if="error">{{ error }}</span>
  </div>
</template>

<script>
export default {
  props: {
    value: String,
    required: Boolean,
    minLength: Number,
    maxLength: Number
  },
  data() {
    return {
      error: ''
    };
  },
  methods: {
    validate() {
      this.error = '';
      if (this.required && !this.value) {
        this.error = 'This field is required.';
      } else if (this.value.length < this.minLength) {
        this.error = `Minimum length is ${this.minLength}.`;
      } else if (this.value.length > this.maxLength) {
        this.error = `Maximum length is ${this.maxLength}.`;
      }
    }
  }
};
</script>

<template>
  <div>
    <custom-input v-model="inputValue" :required="true" :minLength="3" :maxLength="10"></custom-input>
  </div>
</template>

<script>
import CustomInput from './CustomInput.vue';

export default {
  components: {
    CustomInput
  },
  data() {
    return {
      inputValue: ''
    };
  }
};
</script>

<input
  :value="value"
  @input="$emit('input', $event.target.value)"
/>