前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue中子组件直接修改父组件prop属性bug

vue中子组件直接修改父组件prop属性bug

作者头像
Daotin
发布2019-12-10 17:54:43
1.3K0
发布2019-12-10 17:54:43
举报
文章被收录于专栏:从零开始学 Web 前端

在有些时候,子组件直接修改父组件传来的 prop 对象的属性会出现不同步的问题。

比如,父组件传过来的一个对象 checkBoxObj:

代码语言:javascript
复制
checkBoxObj:{
    checked: false
}

checked 通过v-model绑定给子组件的 checkbox,然后点击这个checkbox,试图改变 checked 的值,但是有时候会发现 checkbox 的选中状态和 checked 相反,也就是不同步的问题。

(尝试)解决办法

将prop的checkBoxObj值赋值给data的一个值checkBoxData

代码语言:javascript
复制
this.checkBoxData = this.checkBoxObj;

由于是直接赋值,也存在引用关系,修改checkBoxDatachecked就相当于修改了checkBoxObjchecked。于是这个bug不在出现。

然后直接修改这个checkBoxData的checked属性值,不要直接修改prop传过来的值。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-12-06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • (尝试)解决办法
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档