Vue3.0 父子组件使用 v-model 通信的新使用方式

封装了一个处理 input 的组件，父组件使用 v-model 来监听数据值，子组件使用 $emit 的方式返回处理过的值，但是实现的方法与 Vue2.0 不太相同。

子组件，注意 props 的 modelValue 和 emit 的内容

<tempplate>
  <div>
	 <input
       type="email"
       :value="inputRef.val"
       @input="updateValue"
     />
  </div>
</template>

<script>
import { defineComponent, reactive, PropType} from 'vue';
export default defineComponent({
  // 这里我把 ts 的泛型之类的限制都去除了， 请根据自己的需求自己设置
  interface aa{}
  props: {
    aa: Array as PropType<aa[]>
    modelValue: String, 
  },
  
  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;
      //  这里的 emit 内容很重要，update 后面的值必须和 props 传入的值一样
      context.emit('update:modelValue', targetValue)
    };
    return { inputRef, validateInput, updateValue };
  },
});
</script>

父组件

...
 <ValidateInput v-model="selfValue" :aa='......'></ValidateInput>
 查看是否有监听到子组件返回的值： {{selfValue}}
...

//script
import ValidateInput from './ValidateInput.ts'

components: {
  ValidateInput 
},

setup() {
  const selfValue = ref('');
  return { selfValue };
},