vue中子组件直接修改父组件prop属性bug
在有些时候,子组件直接修改父组件传来的 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的更多相关文章
- Flutter子组件调用父组件方法修改父组件参数
子组件调用父级组件方法的主要实现是父组件给子组件传入一个方法,然后在子组件中调用父级方法来修改父级的参数.看一下效果图 父级组件实现 在父级组件中写一个_editParentText的方法来修改组件中 ...
- vue 子组件修改父组件传来的props值,报错
vue不推荐直接在子组件中修改父组件传来的props的值,会报错 [Vue warn]: Avoid mutating a prop directly since the value will be ...
- vue中通过.sync修饰符实现子组件修改父组件数据
vue父子通讯是单向数据流,也就是子组件不能修改父组件的值,但是在一些情况下是需要这样做的. 先看官方文档: 接下来举例实现 1.实现一个双向数据绑定,子组件改变的时候,父组件也在改变 父组件 < ...
- vue—子组件修改父组件的值
如何在子组件中修改父组件的值第一步:首先得保证父组件中有值吧这是userManage.vue 1 data(){ 2 return{ 3 dialogCreate:'false' 4 } 5 } 第二 ...
- vue 子组件修改父组件变量问题
昨天遇到一个这样的场景, 主页面引用了一个子页面,子页面有个Redio选择,2个选项. 默认的,会从父组件传递一个参数给子组件作为默认值,实现默认选中效果,以及用来做反选. 开始没什么问题,页面都摆上 ...
- vue2.0 子组件props接受父组件传递的值,能不能修改的问题整理
父组件代码: <!-- --> <template> <div class=''> <el-link type="danger">传 ...
- Vue-自定义事件之—— 子组件修改父组件的值
如何利用自定义的事件,在子组件中修改父组件里边的值? 关键点记住:三个事件名字 步骤如下: 这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-module 第一步:你 ...
- 子组件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 ...
- vue子组件修改父组件传递过来的值
这里不再赘述父子组件及子父组件传值,不懂的同学可以翻看我以前写过的关于两者传值的文章 父子组件传值:https://www.cnblogs.com/Sky-Ice/p/9267192.html 子父组 ...
随机推荐
- cognos服务器性能测试诊断分析优化过程记录
前段时间客户方一个系统上线后出现性能问题,就是查询报表的时候出现宕机现象,应项目组要求过去帮忙测试优化问题. 该项目的架构相对比较复杂,登录后要先进行认证服务器认证用户然后登录到应用系统A,在跳转到 ...
- sublime插件开发教程2
直接进入正题 先新建个chajian.py python写起 import sublime import sublime_plugin class ExampleCommand(sublime_plu ...
- 深度学习解决NLP问题:语义相似度计算
在NLP领域,语义相似度的计算一直是个难题:搜索场景下query和Doc的语义相似度.feeds场景下Doc和Doc的语义相似度.机器翻译场景下A句子和B句子的语义相似度等等.本文通过介绍DSSM.C ...
- 腾讯视频缓存 tdl 转 mp4
找到腾讯视频->设置,看下缓存文件的目录地址,然后cmd,通过命令进行转化. copy/b *.tdl 1.mp4
- Codeforces Round #451 (Div. 2) A B C D E
Codeforces Round #451 (Div. 2) A Rounding 题目链接: http://codeforces.com/contest/898/problem/A 思路: 小于等于 ...
- Spring 核心技术与产品理念剖析(上)
IT 技术发展太快了,就像浪潮一样一波接着一波,朝你迎面扑来,稍不留神就会被巨浪卷至海底而不得翻身.我们必须要学会抓住那些不变的本质或规律,只有这样才能屹立潮头而不倒,乘风破浪,做这个巨变时代的弄潮儿 ...
- Spring IOC容器装配Bean_基于注解配置方式
bean的实例化 1.导入jar包(必不可少的) 2.实例化bean applicationContext.xml(xml的写法) <bean id="userDao" cl ...
- 下一代容器架构已出,Docker何去何处?看看这里的6问6答!!
我猜很多人一看这个标题已经感觉很懵逼了,什么?下一代容器都出来了,我还没学Docker呢!!! 咳咳~~在这里我给大家做一个保证,下一代容器目前也只是各个公司在测试阶段,Github上面也有很多Iss ...
- 【玩转MLS系列】基础教程
1.申请华为机器学习服务MLS标准版服务: 1.如果还未注册华为云,请先进入华为云官网https://www.huaweicloud.com/进行注册:如果已注册,请登录,转第2步. 2.在华为云官网 ...
- 即将到来的“分布式云”(DPaaS):分布式计算+ DB +存储即服务
我在区块链会议上就即将到来的公共"分布式云"系统进行了讨论,该系统将主流的公共云平台(如AWS,Azure,Google Cloud,Heroku等)与区块链和P2P网络相结合,比 ...