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里
![在这里插入图片描述](https://img-blog.csdnimg.cn/12e1f29e46f64b819f33d285db4e353e.png#pic_center

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([]);

本文链接：https://www.kjpai.cn/news/2024-03-26/148753.html，文章来源：网络cs，作者：康由，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！