14. VUE 子组件修改父组件的值
在 Vue 当中,父组件 -> 子组件 传值,都是通过属性的形式传递的。
子组件 修改 传递数据
直接操作父组件传递过来的值,用是可以用的,但是打开控制台后,会发现 Vue 有个警告:你不要直接修改父组件传递过来数据。
单向数据流的概念
在 Vue 当中有个单向数据流的概念,也就是父组件可以向子组件通过属性的形式传递参数,你传递的参数可以随便修改,也就是说父组件可以随意的向子组件随意的传递参数,但是子组件绝对不能反过来去修改父组件传递过来的参数。
之所有 Vue 之中有单项数据流的概念,原因在于,一旦你的子组件接受的数据不是基础类型时,例如对象,也就是引用类型的数据时,你在子组件里面改变了传递过来的数据,有可能这个数据还被其他子组件使用,这样你这个子组件改了这个数据,不仅仅影响你你这个组件,还可能对其他的子组件造成影响。
在vue2.0+ 后不再是双向绑定,如果要进行双向绑定需要特殊处理。
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data
or computed property based on the prop's value. Prop being mutated: "你修改的属性名"
参考:https://www.jb51.net/article/142021.htm
14. VUE 子组件修改父组件的值的更多相关文章
- 【VUE】7.组件通信(二)子组件修改父组件
1. 前提&知识点 1./components/Father.vue 是父组件, Son.vue 是子组件 2.子组件修改父组件 emit 2. 组件通信 1. 首先对子组件绑定一个事件 ch ...
- vue2.0子组件修改父组件props数据的值
从vue1.0升级至2.0之后 prop的.sync被去除 因此直接在子组件修改父组件的值是会报错的如下: 目的是为了阻止子组件影响父组件的数据那么在vue2.0之后 如何在子组件修改父组件props ...
- React-Native子组件修改父组件的几种方式,兄弟组件状态修改(转载)
子组件修改父组件的状态,在开发中非常常见,下面列举了几种方式.DeviceEventEmitter可以跨组件,跨页面进行数据传递,还有一些状态的修改.http://www.jianshu.com/p/ ...
- 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个选项. 默认的,会从父组件传递一个参数给子组件作为默认值,实现默认选中效果,以及用来做反选. 开始没什么问题,页面都摆上 ...
- Vue-自定义事件之—— 子组件修改父组件的值
如何利用自定义的事件,在子组件中修改父组件里边的值? 关键点记住:三个事件名字 步骤如下: 这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-module 第一步:你 ...
- vuejs利用props,子组件修改父组件的数据,父组件修改子组件的的数据,数据类型为数组
博文参考 传送们点一点 父组件: <template> <div> <aa class="abc" v-model="test" ...
随机推荐
- fixed实现遮罩层,小程序
css /** 分享微信,分享朋友圈 **/ .goods_share_mask { background-color: rgba(0, 0, 0, 0.3); position: fixed; to ...
- git配置了公钥,在下载项目时为什么还要输入密码
配置git地址:https://www.cnblogs.com/lz0925/p/10794616.html 原文链接:https://blog.csdn.net/xiaomengzi_16/arti ...
- JS常用数值验证
1.正整数验证 正整数是大于0的整数. function validateInteger(val) { return Number.isInteger(val) && val > ...
- selectors版socket
一.作业需求: 使用SELECT或SELECTORS模块实现并发简单版FTP 允许多用户并发上传下载文件 二.readme 一.作业需求: 使用SELECT或SELECTORS模块实现并发简单版FTP ...
- s2010 安装mvc3
下载链接如下:MVC 3安装包:http://www.microsoft.com/downloads/zh-cn/details.aspx?familyid=d2928bc1-f48c-4e95-a0 ...
- 翻译:《实用的Python编程》03_03_Error_checking
目录 | 上一节 (3.2 深入函数) | 下一节 (3.4 模块) 3.3 错误检查 虽然前面已经介绍了异常,但本节补充一些有关错误检查和异常处理的其它细节. 程序是如何运行失败的 Python 不 ...
- 虚拟机安装centos系统【史上最详细的】
因为文章中有很多的图片,在博客园中还需要单张上传,所以使用了将markdown的文件链接存入网盘中让大家下载 windows系统请使用Typora软件打开 如果不知道Typora是什么软件,请在百度搜 ...
- MyBatis(二):自定义持久层框架思路分析
使用端 引入架构端Maven依赖 SqlMapConfig.xml-数据库配置信息(数据库连接jar名称.连接URL.用户名.密码),引入Mapper.xml的路径 XxMapper.xml-SQL配 ...
- IDEA修改jar包中class文件后重新生成jar包
一.背景 最新想要修改rebeyond大佬的冰蝎项目,特地去网上搜索如何修改jar包中的源码再替换回去的方法,但由于现在的一些文章写的太烂,导致走了很多弯路,因此写下这篇快速使用IDEA修改源码并替换 ...
- FreeBSD 12.2 已经发布 从现有版本更新到12
#freebsd-update -r 12.2-RELEASE upgrade 如果提示更新第三方软件后,再执行freebsd-update install , 请输入 #pkg update &am ...