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

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

checkBoxObj:{
checked: false
}

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

(尝试)解决办法

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

this.checkBoxData = this.checkBoxObj;

由于是直接赋值,也存在引用关系,修改checkBoxData的checked就相当于修改了checkBoxObj的checked。于是这个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. 预训练语言模型整理(ELMo/GPT/BERT...)

    目录 简介 预训练任务简介 自回归语言模型 自编码语言模型 预训练模型的简介与对比 ELMo 细节 ELMo的下游使用 GPT/GPT2 GPT 细节 微调 GPT2 优缺点 BERT BERT的预训 ...

  2. oracle内存占用过高和修改不当无法启动oracle实例的解决办法

    今天,在自己机器上装了oracle 12c,发现Oracle的服务Oracle RDBMS Kenel  Executable (OracleServiceORCL)占用内存高达5G,本人电脑内存才1 ...

  3. Java正则表达式Pattern和Matcher类

    转载自--小鱼儿是坏蛋(原文链接) 概述 Pattern类的作用在于编译正则表达式后创建一个匹配模式.    Matcher类使用Pattern实例提供的模式信息对正则表达式进行匹配 Pattern类 ...

  4. Java File类常用方法及实例

    创建:createNewFile()在指定位置创建一个空文件,成功就返回true,如果已存在就不创建,然后返回false. createTempFile(String prefix, String s ...

  5. Win10无法安装.NET Framework3.5的解决办法

    诸位网友如果工作中使用WIN10遇到如图的这种问题,现将解决办法整理如下: 一.第一步就是修复系统:按“Windows+X”点击“Windows PowerShell(管理员)&命令提示符(管 ...

  6. 为NLog自定义LayoutRenderer

    长话短说 前文<解剖HttpClientFactory,自由扩展HttpMessageHandler>主要想讲如何扩展HttpMessageHandler,  示例为在每个Http请求中的 ...

  7. IDEA如何重置窗口布局

    如何重置窗口布局 我不知道怎么搞的,左边的,上边的,下边的,视图都没有了 , 重启了一下,然后重置为默认视图,就好了

  8. 硬核! 逛了4年Github ,一口气把我收藏的 Java 开源项目分享给你!

    Awsome Java Great Java project on Github(Github 上非常棒的 Java 开源项目). English Version 大家都知道 Github 是一个程序 ...

  9. js中innerHTML和outerHTML的相同与不同

    innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML,包括标签. outerHTML  设置或获取对象及其内容的HTML形式,也就是标签和文本内容全都显示出来 innerText  ...

  10. 【开发者portal在线开发插件系列一】profile和基本上下行消息

    前言: 开发者portal支持在线开发profile(即设备建模).在线开发插件.模拟应用管理设备.模拟设备上报数据接收命令.支持离线开发的profile和插件的上传部署,是合作伙伴快速集成设备.对接 ...