父组件chat.vue<template> <div class="chat"> <h2>chat-data:{{Data.text}}</h2> <List v-model="Data" v-model:text="txt" @update:model-value="inputFunc($event)"/> <h2>chat-text:{{txt}}</h2> </div></template><script lang="ts">import { defineComponent, ref, reactive } from 'vue'import List from '../list/list.vue'export default defineComponent({ name: 'chat', components:{ List }, setup() { let txt=ref('') let Data=reactive<any>({ placeholder:'请输入', text:'' }) const inputFunc=(event:any)=>{ console.log('inputFunc:',event.text) Data.text = event.text console.log(Data.text) } return { txt, Data, inputFunc } }})</script><style scoped>.chat{ padding: 100px 0;}</style>子组件：list.vue<template> <div class="list" ref="formRef"> list-modelValue: <input type="text" :value="modelValue.text" :placeholder="modelValue.placeholder" @input="modelValueChange($event)"> list-text: <input type="text" :value="text" @input="modelValueChange1($event)"> </div></template><script lang="ts">import { defineComponent } from 'vue'export default defineComponent({ name: 'list', props:{ // 组件的双向绑定的话，v-model冒号后面不写值，默认就是modelValue 进行接收 modelValue: { type: Object, required: true }, text:String, }, emits: ['update:modelValue','update:text'], setup(props, { emit }) { const modelValueChange = (event: any) => { console.log('handleValueChange') console.log(event.target.value) let val = event.target.value // 执行这个方法之后，就会传输到父组件，实现双向数据绑定 emit('update:modelValue',{ ...props.modelValue, text:val }) } const modelValueChange1 = (event: any) => { console.log('handleValueChange') emit('update:text',event.target.value) } return { modelValueChange, modelValueChange1 } }})</script><style scoped></style>为什么我在父组件可以监听到 Data.text 的更改，但是界面上只更改一次？但是用ref绑定的数据就没有问题