0


vue3 组件响应式v-model 失效,实践踩坑,一文搞懂组件响应式原理,对初学者友好

文章目录

前情提要

在这里插入图片描述

vue3的v-model已经有了变化,假如你还不知道其中细节,看完这篇文章你就完全明白了,我以踩坑的场景来进行解析。起因是在我的项目中需要一个输入框组件,这个组件用来根据输入异步查询系统内已有人员,而且在多个地方需要用到这个输入框,所以必须要封装成组件,但是我还是本着学习的态度认真的读完了官方文档相关的内容,结果问题还是出现了;


实战解析

首先我读了有关的内容比如这段官方文档;

有了官方文档的基础知识,我大概的了解了如果你想封装一个响应式组件,那么基础是你需要这样写:

<!-- CustomInput.vue --><script setup>defineProps(['modelValue'])defineEmits(['update:modelValue'])</script><template><input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"/></template>

这是个最基本的例子,我看完后感觉很简单,于是有了以下写法:

//father<InputUser :modelValue="fatherValue"></InputUser>//childe<el-select v-model="modelValue"><el-option v-for="item in options":key="item.id":label="item.label":value="item.value"/></el-select><script setup>defineProps({modelValue: String,})</script>

这里我就简单列下dom可以说明问题就行,以上写法会导致双向绑定失败;因为vue3的组件v-model是有说法的,只有俩种写法是正确的,父组件处:

  1. v-model=“item.value”
  2. v-model:modelValue = “item.value” //注意之间使用:modelValue不可以

🤔为什么?

1、默认情况下,v-model 在组件上都是使用 modelValue 作为 prop,并以 update:modelValue 作为对应的事件。所以我们的响应式生效了,也就是说你的props属性如果有一个叫

modelValue

,vue3的v-model会默认与它匹配

2、我们可以通过给 v-model 指定一个参数来更改这些名字,例如: v-model:title,就会匹配props中的title,这里也就是为什么我们可以v-model:modelValue这样写;

3、为什么

:modelValue = "item.value"

不可以,因为v-model是vue语法糖,背后原理是利用emit(‘update:modelValue’)来修改,所以可以,而:简写不具备组件通信中的语法糖功能;所以在vue3中,为了更好的对组件进行双向响应式,就只能用v-model这种写法。


最后

📚 vue3专栏
☃️ 个人简介:一个喜爱技术的人。
🌞 励志格言: 脚踏实地,虚心学习。
❗如果文章还可以,记得用你可爱的小手点赞👍关注✅,我会在第一时间回、回访,欢迎进一步交流。


本文转载自: https://blog.csdn.net/g18204746769/article/details/127694121
版权归原作者 GLM_ 所有, 如有侵权,请联系我们删除。

“vue3 组件响应式v-model 失效,实践踩坑,一文搞懂组件响应式原理,对初学者友好”的评论:

还没有评论