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" ...
随机推荐
- listen EADDRINUSE: address already in use ::: 端口被占用
netstat -ano|findstr "端口号" // 查询被占用端口号的pid(3000,端口号则是被占用的端口号) taskkill /pid 8888 /F // 结束端 ...
- Pygame基础(1)
Pygame是Python的一个很常用的游戏框架,今天我来讲一讲Pygame的基础知识 Pygame的官网:https://www.pygame.org/news Pygame的下载 打开cmd输入p ...
- Java流程控制:循环结构
一.简介 顺序结构的程序语句只能被执行一次,如果您想要同样的操作执行多次,就需要使用循环结构. Java中有三种主要的循环结构: 'while'循环 'do...while'循环 'for'循环 在J ...
- Jmeter的脚本参数化
一.变量 Jmeter中的变量用法:${变量名称} 变量定义:两种 1.用户定义变量 User Defined Variables 2.用户参数 User Parameters 1.1用户定义变量 ...
- JavaScript实现动态添加员工
html代码: <div id="empAdd"> <fieldset> <legend><strong>添加员工</stro ...
- Mybatis系列全解(七):全息视角看Dao层两种实现方式之传统方式与代理方式
封面:洛小汐 作者:潘潘 一直以来 他们都说为了生活 便追求所谓成功 顶级薪水.名牌包包 还有学区房 · 不过 总有人丢了生活 仍一无所获 · 我比较随遇而安 有些事懒得明白 平日里问心无愧 感兴趣的 ...
- Java-for循环打印九九乘法表
Java打印九九乘法表 public class forDemo04 { public static void main(String[] args) { //练习3:打印九九乘法表 /* 1*1=1 ...
- C#开发BIMFACE系列38 网页集成开发2:审图系统中的模型或图纸批注
系列目录 [已更新最新开发文章,点击查看详细] 在运维或协同的场景中,经常需要对模型或图纸进行批注,及时记录已发现的问题并交给相关负责的人员. 在开始实现功能之前,先了解一下BIMFACE中有 ...
- The 2018 ACM-ICPC CCPC NING XIA G-Factories
题意:在一棵数的叶子上建k个工厂保证,求两两距离之和的最小值. 思路:如果一个一个叶子节点去考虑去与否太麻烦了,直接考虑该节点的子树上选取几个作为工厂,利用树形DP,dp[u][i]表示的是u节点为根 ...
- Cookie与Session的安全性
说到cookie与session我们首先要说一下为什么要引入这两个东西,这两个多西到底是干什么的 起源 由于HTTP协议使无状态的: 每一次请求都是新的请求,不会记得之前通信的状态 客户端与服务端的一 ...