使用Vue封装表单组件

<template>
  <div>
    <input type="text" v-model="model">
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  computed: {
    model: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    }
  }
}
</script>

应用组件

<template>
  <div>
    <easy-input v-model="easy"></easy-input>
    {{easy}}
  </div>
</template>
<script>
import EasyInput from './EasyInput'
export default {
  components: {
    EasyInput
  },
  data () {
    return {
      easy: ''
    }
  }
}
</script>