vue3子组件上绑定(v-model="xx")父组件传过来的值后报错解决
遇到的问题
vue3的项目中, 升级了vant的版本(^4.0.7)后, 子组件中用v-model的地方出现了报错
报错的内容
v-model cannot be used on a prop, because local prop bindings are not writable.Use a v-bind binding combined with a v-on listener that emits update:x event instead.
解决问题
在阅读vue3的文档中看到了这么一段话
单向数据流
所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。这避免了子组件意外修改父组件的状态的情况，不然应用的数据流将很容易变得混乱而难以理解。
另外，每次父组件更新后，所有的子组件中的 props 都会被更新到最新值，这意味着你不应该在子组件中去更改一个 prop。若你这么做了，Vue 会在控制台上向你抛出警告：
最后声明了局部属性后 上边的报错消失
prop 被用于传入初始值；而子组件想在之后将其作为一个局部数据属性。在这种情况下，最好是新定义一个局部数据属性，从 props 上获取初始值即可
局部属性定义在了watch里
watch(() => props.isSortPopup, (newVal, oldVal) => {
a.value = props.sortArr;
})
isSortPopup 是一个状态, 发现直接监听父组件值的话 并不是每次都触发, 所以在关闭, 打开的加了一个标识
这样每次就可以监听到数据的变化附章节链接, 仅供参考, 如有错误, 欢迎指出, 随时交流
https://cn.vuejs.org/guide/components/props.html#one-way-data-flow
文档上的内容其实并没有看太明白
不知道怎么去computed
为什么会定义在watch里呢
发现直接去a.value = props.sortArr 的话 得到的是一个初始值, 也就是父组件在声明sortArr的最初状态
const sortArr = ref([]);
总结
到此这篇关于vue3子组件上绑定(v-model="xx")父组件传过来的值后报错解决的文章就介绍到这了,更多相关vue3子组件绑定父组件值后报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Three.js是一个基于JavaScript的开源库,用于在网页上创建和显示3D图形,这篇文章主要介绍了如何用Three.js和Vue 3实现3D商品展示的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-07-07
这篇文章主要介绍了vue过滤器用法,结合实例形式总结分析了vue.js常见过滤器相关使用技巧与操作注意事项,需要的朋友可以参考下2019-03-03
网页截图与截屏功能在许多Web应用程序中都非常有用,Vue.js作为一个流行的JavaScript框架,提供了许多工具和库来简化网页截图和截屏的实现,本文将介绍如何使用Vue来实现一个网页截图和截屏功能的示例,包括使用html2canvas库和vue-cropper库,需要的朋友可以参考下2023-10-10
对于日常使用vue3开发项目的前端小伙伴来说,组件通信方式可以说是必会的基本功,今天带大家一起盘下vue3中的14种通信方式,希望对大家有所帮助2025-01-01
案例1使用async/await结合Promise.all实现并行接口调用,案例2通过async/await顺序执行确保数据依赖,两种方式适用于不同场景,合理选择可提升效率2025-08-08
这篇文章主要为大家详细介绍了vue3中form表单层级嵌套问题的相关解决方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2025-05-05
这篇文章主要介绍了vue2中使用less简易教程，由于不需要手动配置webpack，所以vue中使用less是非常简单的，只需要安装less，less-loadder就ok了2018-03-03
文章指出Quill 2.0.0-dev.4与2.0.2版本存在兼容性问题,原因未知,主要步骤包括引入依赖、创建编辑器组件、使用及效果测试2025-08-08
这篇文章主要介绍了前端Vue3+vant实现OSS上传图片的相关资料,文中通过示例代码详细说明了上传文件的总流程,包括可能出现的跨域问题以及如何配置服务器以解决跨域问题,需要的朋友可以参考下2025-05-05
这篇文章主要为大家介绍了Vue3基于rem比例H5缩放方案示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
最新评论