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子组件绑定父组件值后报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！