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 子父组 ...
随机推荐
- pyinstaller打包python文件成exe(原理.安装.问题)
py文件打包成exe文件的方式一共有三种:py2exe.PyInstaller和cx_Freeze 本文分四个步骤来详讲如何用PyInstaller将py文件打包成exe文件 1. PyInstall ...
- 打算写一个《重学Node.js》系列,希望大家多多支持
先放上链接吧,项目已经开始2周了:https://github.com/hellozhangran/happy-egg-server 想法 现在是2019年11月24日,还有人要开始学习Node.js ...
- Tensorflow的基本使用
基本使用 使用 TensorFlow, 你必须明白 TensorFlow: • 使用图 (graph) 来表示计算任务. • 在被称之为 会话(Session)的上下文 (context) 中执行图. ...
- ASP.NET Core 中的 ObjectPool 对象重用(一)
前言 对象池是一种设计模式,一个对象池包含一组已经初始化过且可以使用的对象,而可以在有需求时创建和销毁对象.池的对象可以从池中取得对象,对其进行操作处理,并在不需要时归还给池子而非直接销毁他,他是一种 ...
- 实战webpack系列03
03.Webpack的强大功能 一.生成Source Maps(使调试更容易) 通过简单的配置,webpack就可以在打包时为我们生成的source maps,这为我们提供了一种对应编译文件和源文件的 ...
- while(cin)?
#include<iostream> #include<utility> using namespace std; int main() { int i; do { cout& ...
- 相关性不一定等于因果性:从 Yule-Simpson’s Paradox 讲起
1. 两件事伴随发生,不代表他们之间有因果关系 - 从一些荒诞相关性案例说起 在日常生活和数据分析中,我们可以得到大量相关性的结论,例如: 输入X变量,有98%置信度得到Y变量 只要努力,就能成功 只 ...
- gulp+webpack+angular1的一点小经验(第三部分使用一些angular1的插件ui-bootstrap与highcharts)
第一个要介绍的是我们的麻烦制造器:angular-ui-bootstrap ui-bootstrap可以有很多通用的插件给大家用,比如弹窗啊(modal),翻页控件啊(pagination),为什么说 ...
- css6——通栏平均分布
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- STM32F4 阿波罗寄存器点亮LED灯
学习步骤: 使用寄存器点亮LED灯,需要进行如下的步骤,LED灯属于外设部分,首先需要开启外设的时钟使能,然后LED灯是PB1口,(芯片是正点原子的阿波罗),接着定义GPIOB口的输出模式,为上拉.推 ...