vue3 使用v-model父传子并修改传值

vue3使用v-model替代vue2的v-bind.sync

父使用v-model传值给子，这里的v-model本质上是:modelValue=“值”，@update:modelValue="值 = $event"这二者的缩写

<template>
   <div>
	双向绑定{{num}}
	<child v-model="num"></child>
	// 上方代码是下方的简写
    <child :modelValue="num" @update:modelValue="num = $event"></child>
   </div>
</template>
<script>
import child from './test.vue'
export default {
    components: { child },
    data () {
        return {
            num: 0
        }
    }
}
 </script>

所以子中通过在props中接收modelValue再$emit(‘update:modelValue’) 来修改父传来的值

<template>
    <div>
        <input type="text" @input="a">
    </div>
</template>

<script>
export default {
    props: ["modelValue"],
    methods: {
        a (e) {
            this.$emit('update:modelValue', e.target.value)
        }
    }
}
</script>