vue3 子组件上绑定(v-model=“xx“) 父组件传过来的值后报错-Toy模板网

这篇具有很好参考价值的文章主要介绍了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里
vue3 子组件上绑定(v-model=“xx“) 父组件传过来的值后报错 #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.toymoban.com/news/detail-441212.html

到了这里，关于vue3 子组件上绑定(v-model=“xx“) 父组件传过来的值后报错的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！