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 子父组 ...
随机推荐
- k8s Ingress 理解和部署
目录 前言 Ingress 与 ingress-controller Ingress 部署 1.部署 ingress-controller 2.部署测试 web 服务 3.部署 Ingress 4.检 ...
- BIOS和CMOS概念整理
一:什么是BIOS BIOS(Basic Input Output System),基本输入输出系统.是被写死在主板ROM只读芯片中的一组程序,在开机的时候首先要去读取的一个小程序. 它是我们可以将 ...
- 题解——面积(area.cpp)
题目来源&题面简述: 思路与算法选择: 只有*里面的部分对我们有用,所以可以将 *号外的部分标记一下. 可以用著名的BFS大法实现此过程.(连通块) 连通块模板: #include<bi ...
- BeanUtils.copyProperties()怎样去掉字段首尾的空格
背景 下午三时许,笔者正戴着耳机听着歌开心的敲着bug,忽然听到办公室的吵架声,原来是ios开发和产品小姐姐吵起来了,为了一个车牌号的校验问题.起因是ios传的车牌号没有将字符串的首尾空格去掉,后端直 ...
- 我的 Input框 不可能这么可爱
<input /> 标签是我们日常开发中非常常见的替换元素了,但是最近在刷 whattwg 跟 MDN 的时候发现 跟 <input /> 有很多相关的属性,选择器都没怎么用过 ...
- java Math类常用方法
package com.niuke.test; public class MathDemo { public static void main(String args[]){ /** * abs求绝对 ...
- FBV与CBV 及CBV源码分析
FBV与CBV 及CBV源码分析 FBV(Function Based View) 基于函数的视图 基于函数的视图,我们一直在用没啥好讲的,就是导入模块调用函数执行业务 CBV(Class Based ...
- DNS服务反向解析实验
DNS域名解析服务是用于解析域名与ip地址对应关系的服务,功能上可以实现正向解析和反向解析 正向解析:根据主机名(域名)查找对应的IP地址. 反向解析:根据IP地址查找对应的主机名(域名). 下面我来 ...
- iOS 一些struct类型的NSLog输出格式
https://my.oschina.net/sayonala/blog/215910 我们经常会输出一些坐标尺寸信息之类的,比如view的frame,是CGRect类型的,用frame.oringi ...
- 在开发Thinkphp5.0智慧软文个人微信个人支付宝企业支付宝接口时遇到的坑
在开发Thinkphp5.0智慧软文个人微信个人支付宝企业支付宝接口时遇到回调后提示成功但是不能自动充值的情况,现在记录一下: 两种情况 1.个人支付宝 个人微信遇到的情况 因为个人支付宝 个人微信 ...