Vue中封装input组件

<input
 v-bind:value="message" 
 v-on:input="message=$event.target.value"> 

let Child = {
  template: '<div>'
    + '<input :value="value" @input="updateValue" placeholder="edit me">'
    + '</div>',
  props: ['value'],
  methods: {
    updateValue(e) {
      this.$emit('input', e.target.value)
    } 
  }
}

let vm = new Vue({
  el: '#app',
  template: '<div>' 
    + '<child v-model="message"></child>' 
    + '<p>Message is: {{ message }}</p>' 
    + '</div>',
  data () {
    return {
      message: '' 
    }
  },
  components: {
    Child 
  }
})

<template>
  <div>
    <input type="text" :value="value" @input="$emit('input', $event.target.value)">
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  }
}
</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>

<template>
  <div>
    <input type="text" :value="inputRef.val" @input="updateValue">
  </div>
</template>
<script>
export default {
  props: {
    modelValue: String
  },
  setup(props, context) {
    const inputRef = reactive({
      val: props.modelValue || ''
    })
  
    updateValue = (e: KeybordEvent) => {
      const targetValue = (e.target as HTMLInputElement).value
      inputRef.val = targetValue
      context.emit('update: modelValue', targetValue)
    }
    
    return {
      inputRef,
      updateValue,
    }
  }
}
</script>