在有些时候,子组件直接修改父组件传来的 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. node后台初始配置(2)

    一.node-app结构 创建成功node-app项目后,会自动生成一些文件一般初始的结构如下图 在bin文件夹里面只有一个文件www      var port = normalizePort(pr ...

  2. Java 从入门到进阶之路(九)

    之前的文章我们介绍了一下 Java 中的构造方法,接下来我们再来看一下 Java 中的引用型数组类型. 现在我们想定义一个坐标系,然后通过横坐标(row)和纵坐标(col)来确定一个坐标点,代码如下: ...

  3. .Net Core3.0 WEB API 中使用FluentValidation验证,实现批量注入

    为什么要使用FluentValidation 1.在日常的开发中,需要验证参数的合理性,不紧前端需要验证传毒的参数,后端也需要验证参数 2.在领域模型中也应该验证,做好防御性的编程是一种好的习惯(其实 ...

  4. xmake从入门到精通8:切换编译模式

    xmake是一个基于Lua的轻量级现代化c/c++的项目构建工具,主要特点是:语法简单易上手,提供更加可读的项目维护,实现跨平台行为一致的构建体验. 本文我们会详细介绍下如何在项目构建过程中切换deb ...

  5. 向mysql数据表中插入数据失败的原因

    1.案例代码: $sql1="insert into content(category,subject,content,username,release_date) values('{$ca ...

  6. ThinkPHP 实现数据库事务回滚示例代码

    ThinkPHP提供了数据库的事务支持,如果要在应用逻辑中使用事务,可以参考下面的方法:   启动事务: $User->startTrans(); 提交事务: $User->commit( ...

  7. Spring Boot SpringApplication启动类(一)

    目录 目录 前言 1.起源 2.SpringApplication 准备阶段 2.1.推断 Web 应用类型 2.2.加载应用上下文初始器 ApplicationContextInitializer ...

  8. 大型情感剧集Selenium:8_selenium网页截图的四种方法

    有时候,有时候,你会相信一切有尽头-当你的代码走到了尽头,那么保留最后一刻的状态尤为重要,此时你该如何操作?记录日志-没有将浏览器当前的状态进行截图来的直观! 那么,selenium截取截屏,有哪些方 ...

  9. 求局域网内所有在线主机的ip

    在一个局域网内,已知其中一台主机的ip为192.,子网掩码为255.,求所有其他在线主机的ip. shell 编码实现 #!/bin/bash netWorkIP=. ) do $netWorkIP$ ...

  10. 搭建本地YUM仓库

    YUM介绍 yum(yellow dog updater modified)为多个Linux发行版的软件包管理工具,Redhat RHEL CentOS Fedora YUM主要用于自动安装,升级rp ...