在 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 子组件修改父组件的值的更多相关文章

  1. 【VUE】7.组件通信(二)子组件修改父组件

    1. 前提&知识点 1./components/Father.vue 是父组件, Son.vue 是子组件 2.子组件修改父组件 emit 2. 组件通信 1. 首先对子组件绑定一个事件 ch ...

  2. vue2.0子组件修改父组件props数据的值

    从vue1.0升级至2.0之后 prop的.sync被去除 因此直接在子组件修改父组件的值是会报错的如下: 目的是为了阻止子组件影响父组件的数据那么在vue2.0之后 如何在子组件修改父组件props ...

  3. React-Native子组件修改父组件的几种方式,兄弟组件状态修改(转载)

    子组件修改父组件的状态,在开发中非常常见,下面列举了几种方式.DeviceEventEmitter可以跨组件,跨页面进行数据传递,还有一些状态的修改.http://www.jianshu.com/p/ ...

  4. vue 子组件修改父组件传来的props值,报错

    vue不推荐直接在子组件中修改父组件传来的props的值,会报错 [Vue warn]: Avoid mutating a prop directly since the value will be ...

  5. vue中通过.sync修饰符实现子组件修改父组件数据

    vue父子通讯是单向数据流,也就是子组件不能修改父组件的值,但是在一些情况下是需要这样做的. 先看官方文档: 接下来举例实现 1.实现一个双向数据绑定,子组件改变的时候,父组件也在改变 父组件 < ...

  6. vue—子组件修改父组件的值

    如何在子组件中修改父组件的值第一步:首先得保证父组件中有值吧这是userManage.vue 1 data(){ 2 return{ 3 dialogCreate:'false' 4 } 5 } 第二 ...

  7. vue 子组件修改父组件变量问题

    昨天遇到一个这样的场景, 主页面引用了一个子页面,子页面有个Redio选择,2个选项. 默认的,会从父组件传递一个参数给子组件作为默认值,实现默认选中效果,以及用来做反选. 开始没什么问题,页面都摆上 ...

  8. Vue-自定义事件之—— 子组件修改父组件的值

    如何利用自定义的事件,在子组件中修改父组件里边的值? 关键点记住:三个事件名字 步骤如下: 这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-module 第一步:你 ...

  9. vuejs利用props,子组件修改父组件的数据,父组件修改子组件的的数据,数据类型为数组

    博文参考 传送们点一点 父组件: <template> <div> <aa class="abc" v-model="test" ...

随机推荐

  1. fixed实现遮罩层,小程序

    css /** 分享微信,分享朋友圈 **/ .goods_share_mask { background-color: rgba(0, 0, 0, 0.3); position: fixed; to ...

  2. git配置了公钥,在下载项目时为什么还要输入密码

    配置git地址:https://www.cnblogs.com/lz0925/p/10794616.html 原文链接:https://blog.csdn.net/xiaomengzi_16/arti ...

  3. JS常用数值验证

    1.正整数验证 正整数是大于0的整数. function validateInteger(val) { return Number.isInteger(val) && val > ...

  4. selectors版socket

    一.作业需求: 使用SELECT或SELECTORS模块实现并发简单版FTP 允许多用户并发上传下载文件 二.readme 一.作业需求: 使用SELECT或SELECTORS模块实现并发简单版FTP ...

  5. s2010 安装mvc3

    下载链接如下:MVC 3安装包:http://www.microsoft.com/downloads/zh-cn/details.aspx?familyid=d2928bc1-f48c-4e95-a0 ...

  6. 翻译:《实用的Python编程》03_03_Error_checking

    目录 | 上一节 (3.2 深入函数) | 下一节 (3.4 模块) 3.3 错误检查 虽然前面已经介绍了异常,但本节补充一些有关错误检查和异常处理的其它细节. 程序是如何运行失败的 Python 不 ...

  7. 虚拟机安装centos系统【史上最详细的】

    因为文章中有很多的图片,在博客园中还需要单张上传,所以使用了将markdown的文件链接存入网盘中让大家下载 windows系统请使用Typora软件打开 如果不知道Typora是什么软件,请在百度搜 ...

  8. MyBatis(二):自定义持久层框架思路分析

    使用端 引入架构端Maven依赖 SqlMapConfig.xml-数据库配置信息(数据库连接jar名称.连接URL.用户名.密码),引入Mapper.xml的路径 XxMapper.xml-SQL配 ...

  9. IDEA修改jar包中class文件后重新生成jar包

    一.背景 最新想要修改rebeyond大佬的冰蝎项目,特地去网上搜索如何修改jar包中的源码再替换回去的方法,但由于现在的一些文章写的太烂,导致走了很多弯路,因此写下这篇快速使用IDEA修改源码并替换 ...

  10. FreeBSD 12.2 已经发布 从现有版本更新到12

    #freebsd-update -r 12.2-RELEASE upgrade 如果提示更新第三方软件后,再执行freebsd-update install , 请输入 #pkg update &am ...