当前栏目
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([]);
相关文章
- 元宇宙趋势下的前端现状
- 前端面试 【CSS】— 实现布局:div垂直居中,左右10px,高度始终为宽度一半
- 前端面试 【CSS】— 通过你对盒模型的理解计算下面CSS代码中红色和绿色面积分别是多少?
- 前端面试 【CSS】— CSS 如何实现“品”字布局?
- 前端面试 【CSS】— CSS 如何实现“圣杯”布局?
- 前端面试 【CSS】— CSS如何实现双飞翼布局?
- 前端面试 【CSS】— 什么是BFC?它的触发条件有哪些?
- 前端面试 【CSS】— BFC的渲染规则有哪些?有哪些应用场景?
- 前端面试 【CSS】— 利用CSS画一个聊天消息对话框
- 前端面试 【CSS】— 如何用CSS画一个平行四边形
- 前端面试 【CSS】— 如何用CSS画一个五角星
- 前端面试 【JavaScript】— JS原始数据类型有哪些?引用数据类型有哪些?
- 前端面试 【JavaScript】— 说出下面代码运行的结果,解释其原因
- 前端面试 【JavaScript】— ‘1‘.toString()为什么可以调用?
- 前端面试 【JavaScript】— 0.1+0.2为什么不等于0.3?如何实现等于0.3?
- 前端面试 【JavaScript】— 什么是BigInt? 谈谈你对它的认识
- FinClip小课堂|H5 和小程序到底哪个好?
- 从零开始摸索VUE,配合Golang搭建导航网站(十六.CSS动画初探)
- Vue原理:渲染流程入口
- 如何在 JavaScript 中操作二维数组