vue3 +Ts 父组件 ref定义值通过v-model绑定 子组件值修改父组件修改不了

• 我们在写组件的时候，只需要传入一个响应式变量时，通过ref创建的方式v-mode绑定变量时，是需要子组件通过emit返回修改事件返回修改后的值才可以的。v-mode是一个语法糖，原理大家可以百度看看就理解了。
• 在vue3里，如果我们直接通过reactive创建的是一个对象则不需要手动写emit来返回数据，直接通过v-mode的方式传入对象，子组件直接使用，修改值时父组件值也会发生改变。
• 下边是ref的赋值方式

父组件

<template>
  <div>
    <MInput v-model="fNumber"/>
  </div>
</template>
 
<script setup lang="ts">
import {
    
     ref } from "vue";
import MInput from './input.vue'
const fNumber = ref('xxxx') // v-model绑定的变量，并赋予初始值
</script>

子组件

<template>
  <input v-model="inputData" @input="changeVal">
</template>
<script setup>
import {
    
    ref, defineProps, defineEmits, watch} from 'vue'
let props = defineProps({
    
    
  modelValue: String
})
let emits = defineEmits(['update:modelValue'])
const inputData = ref(props.modelValue)
const changeVal = (e) => {
    
    
  emits('update:modelValue', e.target.value)
}