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

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

checkBoxObj:{
checked: false
}

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

(尝试)解决办法

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

this.checkBoxData = this.checkBoxObj;

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

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

vue中子组件直接修改父组件prop属性bug的更多相关文章

  1. Flutter子组件调用父组件方法修改父组件参数

    子组件调用父级组件方法的主要实现是父组件给子组件传入一个方法,然后在子组件中调用父级方法来修改父级的参数.看一下效果图 父级组件实现 在父级组件中写一个_editParentText的方法来修改组件中 ...

  2. vue 子组件修改父组件传来的props值,报错

    vue不推荐直接在子组件中修改父组件传来的props的值,会报错 [Vue warn]: Avoid mutating a prop directly since the value will be ...

  3. vue中通过.sync修饰符实现子组件修改父组件数据

    vue父子通讯是单向数据流,也就是子组件不能修改父组件的值,但是在一些情况下是需要这样做的. 先看官方文档: 接下来举例实现 1.实现一个双向数据绑定,子组件改变的时候,父组件也在改变 父组件 < ...

  4. vue—子组件修改父组件的值

    如何在子组件中修改父组件的值第一步:首先得保证父组件中有值吧这是userManage.vue 1 data(){ 2 return{ 3 dialogCreate:'false' 4 } 5 } 第二 ...

  5. vue 子组件修改父组件变量问题

    昨天遇到一个这样的场景, 主页面引用了一个子页面,子页面有个Redio选择,2个选项. 默认的,会从父组件传递一个参数给子组件作为默认值,实现默认选中效果,以及用来做反选. 开始没什么问题,页面都摆上 ...

  6. vue2.0 子组件props接受父组件传递的值,能不能修改的问题整理

    父组件代码: <!-- --> <template> <div class=''> <el-link type="danger">传 ...

  7. Vue-自定义事件之—— 子组件修改父组件的值

    如何利用自定义的事件,在子组件中修改父组件里边的值? 关键点记住:三个事件名字 步骤如下: 这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-module 第一步:你 ...

  8. 子组件props接受父组件传递的值 能修改吗?

    vue2.0 子组件props接受父组件传递的值,能不能修改的问题整理 父组件代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...

  9. vue子组件修改父组件传递过来的值

    这里不再赘述父子组件及子父组件传值,不懂的同学可以翻看我以前写过的关于两者传值的文章 父子组件传值:https://www.cnblogs.com/Sky-Ice/p/9267192.html 子父组 ...

随机推荐

  1. [Odoo12基础教程]之第零篇-win中odoo12环境搭建

    所需材料 1.python3.7 2.pycharm社区版及以上 3.postgresSQL10 下载链接:https://www.enterprisedb.com/thank-you-downloa ...

  2. 解决failed to push some refs to 'git@github.com:TQBX/GIT-Github-.git'问题

    解决以下问题问题: git pull origin master --allow-unrelated-histories 进入vim界面->ESC->:wq 重复第一步->git p ...

  3. 甲小蛙战记:PHP2Java 排雷指南

    (马蜂窝技术原创内容,申请转载请在公众后后台留言,ID:mfwtech ) 大家好,我是来自马蜂窝电商旅游平台的甲小蛙,从前是一名 PHP 工程师,现在可能是一名 PHJ 工程师,以后...... 前 ...

  4. selenium常用命令之页面元素定位

    WebDriver driver= new ChromeDriver();   <input type="text" id="phone" name=&q ...

  5. 更好一点的:Vue 利用指令实现禁止反复发送请求

    理论上可以用于任何元素,生效时会在元素上出现一个同大小的灰色蒙层(button元素会该表原生的disabled属性). /** * 当元素触发发起请求后,当发起的请求中最后一个请求的结果返回(不关心返 ...

  6. android clipChildren 的使用与遇到的困难

    案例 在一次我写画板模块的时候,布局比较普通,但是需要子元素溢出父元素.其中一小块布局如下所示: 红色部分需要溢出,这个时候我想到了clipChildren. clipChildren 就是说我可以不 ...

  7. CentOS 7上利用systemctl添加自定义系统服务

    Centos 7 之 systemctl CentOS 7继承了RHEL 7的新的特性,例如强大的systemctl,而systemctl的使用也使得以往系统服务的/etc/init.d的启动脚本的方 ...

  8. NER

    写在前面:在初学nlp时的第一个任务——NER,尝试了几种方法,cnn+crf.lstm+crf.bert+lstm+crf,毫无疑问,最后结果时Bert下效果最好. 1.关于NER: NER即命名实 ...

  9. c语言I博客专业06

    问题 答案 这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-2/homework/8655 我在 ...

  10. 第二节.NET两种交互模式:c/s和b/s

    1.什么是c/s           c指的是client(客户端),s指的是服务器模式,c/s是client/Server的缩写,客户端需要安装专业的客户端软件,如我们用的qq.酷狗音乐等客户端软件 ...