vue3中自定义组件使用v-modal

vue3自定义组件想要使用v-model的方式有所改变

需要在子组件内定义modelValue的props来接收父组件绑定的v-model

在子组件的内容发生改变时，通知父组件的方式也改成了context.emit('update:modelValue', value) ``

子组件

<template>
    <input
      type="text"
      :value="inputRef.val"
      @input="updateValue"
    >
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'

export default defineComponent({
    props: {
        modelValue: String
    },
    setup (props, context) {
        const inputRef = reactive({
          val: props.modelValue || ''
        })
        
        const updateValue = (e: KeyboardEvent) => {
          const targetValue = (e.target as HTMLInputElement).value
          inputRef.val = targetValue
          context.emit('update:modelValue', targetValue)
        }
        
        return {
          inputRef,
          updateValue
        }
    }
})
</script>

父组件

<template>
    <validate-input v-model="emailVal" />
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import ValidateInput from '@/components/ValidateInput.vue'

export default defineComponent({
    components: {
        ValidateInput
    },
    setup () {
        const emailRef = reactive({
            val: ''
        })
        
        return {
            emailRef
        }
    }
})
</script>