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 子父组 ...
随机推荐
- [Odoo12基础教程]之第一篇-创建Todo应用
声明: 本教程基于 Ruter 老师的 [Odoo基础教程系列] ,Ruter老师教程的链接地址为:Odoo基础教程系列 . 至于为什么已经有了Ruter老师的教程,还要自己再搬移一份呢?是基于一 ...
- 2019-9-25:渗透测试,基础学习,medusa爆破学习
Medusa(美杜莎)暴力破解使用 该文章仅供学习,利用方法来自网络文章,仅供参考 一.简介 medusa(美杜莎)是一个速度快,支持大规模并行,模块化,爆破登陆,可以同时对多个主机,用户或是密码执行 ...
- JSON的使用场景及注意事项介绍
上篇我们讲解了JSON的诞生原因是因为XML整合到HTML中各个浏览器实现的细节不尽相同,所以道格拉斯·克罗克福特(Douglas Crockford) 和 奇普·莫宁斯达(Chip Mornings ...
- /etc/security/limits.conf配置文件详解
这个文件主要是用来限制用户对系统资源的使用.是/lib64/security/pam_limits.so模块对应的/etc/serurity/pam_limits的配置文件. # /etc/secur ...
- mysql的事物,外键,与常用引擎
### part1 时间类型 date YYYY-MM-DD 年月日 (出现日期) time HH:MM:SS 时分秒 (竞赛时间) year YYYY 年份值 (红酒年份 82年矿泉水) datet ...
- 天了噜,为什么外链css要放在头部,js要放在尾部?
我们最开始学前端的时候都会看到教程在处理外部css,js的时候会将css放在header中,js放在body的最后.为什么要这样子处理,今天参考一些资料好好分析下. 为什么外链css为什么要放头部? ...
- PowerMock学习(九)之Mock Answer的使用
关于Mock Answer 上一篇文章,有介绍过关于Arguments Matche的使用,其实 Answer的作用与其比较类似,但是它比 Arguments Matcher 更加强大. Argume ...
- Spring(Bean)4 配置数据源、连接池
<!-- 配置数据源 Mysql c3p0: 连接池. <bean id="dataSource" class="com.mchange.v2.c3p0.Co ...
- django-ajax传输数据
AJAX简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是"异步Javascript和XML". 即使用Javascript语言与服务器 ...
- mysql 替换 tab 键 (\t)
update t_instance set instance_name = replace(instance_name,'\t','') , host_name = replace(host_name ...