vue3组件的数据双向绑定

export default defineComponent({
  props: {
    modelValue: String
  },

<input type="text" class="form-control"
    :class="{'is-invalid': inputRef.error}"
    :value="inputRef.val"
    @input="updateValue"
    @blur="validateInput">
    <span v-if="inputRef.error" class="invalid-feedback">{{inputRef.message}}</span>

setup (props, context) {
    const inputRef = reactive({
      val: props.modelValue || '',
      error: false,
      message: ''
    })
    const updateValue = (e: KeyboardEvent) => {
      const targetValue = (e.target as HTMLInputElement).value
      inputRef.val = targetValue
      context.emit('update:modelValue', targetValue)
    }

<validate-input :rules="emailRules" v-model="emailVal"></validate-input>
    {{emailVal}}

 setup () {
    const emailVal = ref('')
    return {
      emailVal
    }
  }