位置: IT常识 - 正文
vue3 组件响应式v-model 失效，实践踩坑，一文搞懂组件响应式原理，对初学者友好(vue中响应式是什么意思)
编辑：rootadmin推荐整理分享vue3 组件响应式v-model 失效，实践踩坑，一文搞懂组件响应式原理，对初学者友好(vue中响应式是什么意思)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue如何做响应式布局,vue实现响应式,vue 响应式框架,vue响应式组件库,vue如何实现响应式布局,vue 响应式框架,vue如何实现响应式布局,vue3.0响应式原理,内容如对您有帮助，希望把文章链接给更多的朋友！
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是有说法的，只有俩种写法是正确的，父组件处：
v-model=“item.value”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专栏 ☃️ 个人简介：一个喜爱技术的人。 🌞 励志格言: 脚踏实地，虚心学习。 ❗如果文章还可以，记得用你可爱的小手点赞👍关注✅，我会在第一时间回、回访，欢迎进一步交流。
上一篇：乌尤尼盐沼上的锥形盐堆，玻利维亚 (© John Shaw/Minden Pictures)(乌尤尼盐沼的演化过程)
下一篇：vue（绑定style属性）(vue绑定css样式)
