在 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. mysql 8.0.18 小白安装教程

    1. 下载 官网下载:https://dev.mysql.com/downloads/mysql/ 嫌官网网速慢可以加q群,在群文件里下载: 1.下载第一个download 2.解压在自己建的目录(各 ...

  2. SpringBoot+Vue豆宝社区前后端分离项目手把手实战系列教程02---创建后端工程

    本节代码开源地址 代码地址 项目运行截图 搭建后端工程 0.导入sql 在数据库导入 /* Navicat Premium Data Transfer Source Server : localhos ...

  3. jQuery编写组件的几种方式

    原文链接:https://w.cnblogs.com/xiao-xi/p/8572471.html 三种方式: 1.通过$.extend()来扩展jQuery 2.通过$.fn 向jQuery添加新的 ...

  4. EFCodeFirst属性映射约定

    EFCodeFirst属性映射约定 EFCodeFirst 属性映射约定 CodeFirst与数据表之间得映射方式又两种:Data Annotation和Fluent API 默认约定: 表名为类名的 ...

  5. SSM整合再回顾

    一.spring 前言:提起spring就不得不说到它的IOC和AOP的概念.IOC就是一个对象容器,程序员可以将对象的创建交给spring的IOC容器来创建,不再使用传统的new对象方式,从而极大程 ...

  6. 剑指 Offer 36. 二叉搜索树与双向链表 + 中序遍历 + 二叉排序树

    剑指 Offer 36. 二叉搜索树与双向链表 Offer_36 题目描述 题解分析 本题考查的是二叉树的中序遍历以及二叉排序树的特征(二叉排序树的中序遍历序列是升序序列) 利用排序二叉树中序遍历的性 ...

  7. Python2021哔哩哔哩视频爬取

    一.找到想要爬取的视频,进入网页源代码 在网页源代码里面可以很容易的找到视频各种清晰度的源地址 二.对地址发送请求 如果对视频源地址发送get请求会返回403 通过按F12进入开发者工具分析 发现并不 ...

  8. Learn Python the Hard Way,ex37-1

    本练习为复习python的符号和关键字 关键字有: #and or False True print(1==0 and 2==0, 1==0 or 2==0) print(False) print(T ...

  9. FreeBSD Fcitx 输入法框架设置

    #FreeBSD# 在.cshrc和/etc/csh.cshrc中进行如下配置,此配置可以解决部分窗口fcitx无效的问题. setenv QT4_IM_MODULE fcitx setenv GTK ...

  10. MySQL入门(7)——表数据的增、删、改

    MySQL入门(7)--表数据的增.删.改 插入数据 使用INSERT···VALUES语句插入数据 INSERT语句最常用的格式是INSERT···VALUES: INSERT [LOW_PRIOR ...