父子组件的v-model绑定——以Input输入框为例

76 阅读1分钟

前言

 所有带有输入的组件具有value。在单文件组件中,需要做父子之间的v-model数据双向绑定以实现父子之间的交互,包括Input输入框和Textarea文本域。

子组件

在子组件中用defineEmits去接收一个'update:modelValue'事件。

image.png

给Input标签绑定一个@input事件,放入"放入iptChange"函数。

image.png

定义"iptChange"函数,并传入一个参数“e”,可以用“e.target.value”获取Input框里的值,调用emit()去触发'update:modelValue',并把“e.target.value”的值传出去,以更新modelValue的值。还需要用definePros去接受父组件传来的数据modelValue。

image.png

image.png

父组件

在父组件中,给子组件的标签绑定v-model传入“iptValue”并用ref()给iptVaule封装成响应式数据。至此,父子之间的数据交互就完成了,用户在输入框的值可以时时更新到modelValue的值。

image.png

默认情况下,组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。我们可以通过向 v-model 传递参数来修改这些名称:

v-model:otherName="iptValue",然后在子组件中defineProps用“otherName”,defineEmits是里更新事件中用“update:otherName”即可。