前言
所有带有输入的组件具有value。在单文件组件中,需要做父子之间的v-model数据双向绑定以实现父子之间的交互,包括Input输入框和Textarea文本域。
子组件
在子组件中用defineEmits去接收一个'update:modelValue'事件。
给Input标签绑定一个@input事件,放入"放入iptChange"函数。
定义"iptChange"函数,并传入一个参数“e”,可以用“e.target.value”获取Input框里的值,调用emit()去触发'update:modelValue',并把“e.target.value”的值传出去,以更新modelValue的值。还需要用definePros去接受父组件传来的数据modelValue。
父组件
在父组件中,给子组件的标签绑定v-model传入“iptValue”并用ref()给iptVaule封装成响应式数据。至此,父子之间的数据交互就完成了,用户在输入框的值可以时时更新到modelValue的值。
默认情况下,组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。我们可以通过向 v-model 传递参数来修改这些名称:
v-model:otherName="iptValue"
,然后在子组件中defineProps
用“otherName
”,defineEmits
是里更新事件中用“update:otherName
”即可。