1、 vue中,父子组件通信最常用的方式就是props和 $emit,但是父组件传递给子组件的数据,能不能进行修改,修改后都有啥问题呢

2、先上代码:

父组件代码:

<!--  -->
<template>
<div class=''>
<el-link type="danger">传值为对象:</el-link>
<div>
父组件中显示fatherData的值:{{fatherData}}
<l0705components :fatherData="fatherData"></l0705components>
</div>
<br><br><br>
<el-link type="danger">传值为字符串,使用v-model传值:</el-link>
<div>
父组件中显示fatherData2的值:{{fatherData2}}
<l0705components v-model="fatherData2"></l0705components>
</div>
<br><br>
<el-link type="danger">传值为字符串:</el-link>
<div>
父组件中显示fatherData3的值:{{fatherData3}}
<l0705components :fatherData3="fatherData3"></l0705components>
</div>
</div>
</template> <script>
import l0705components from './views/l0705components'
export default {
name: "L0705L",
components: {
l0705components
},
data() {
// 这里存放数据
return {
fatherData:{
name:"李四",
age:"14"
},
fatherData2:'父组件的数据2',
fatherData3: '父组件的数据3'
}
}
}
</script>

  子组件代码:

<!--  -->
<template>
<div class=''>
<div v-if="fatherData">
子组件中显示fatherData的值:{{fatherData}}
<el-button type="danger" @click="changeFather">
点击修改父组件fartherData的值-姓名改为“王五”
</el-button>
</div> <div v-if="value!==''">
<input v-model="value">
</div> <div v-if="fatherData3!==''">
子组件中显示fatherData3的值:{{fatherData3}}
<el-button type="danger" @click="changeFather3">
点击修改父组件fartherData3的值,改为“哈哈哈哈哈”
</el-button>
</div> </div>
</template> <script>
export default {
props:{
fatherData:{
type:Object
},
value: {
type: String,
default: ''
},
fatherData3: {
type: String,
default: ''
}
},
name: "l0705components",
data() {
// 这里存放数据
return {
}
},
// 方法集合
methods: {
changeFather(){
this.fatherData.name = '王五'
},
changeFather3() {
this.fatherData3 = '哈哈哈哈哈'
}
}
}
</script>

3、页面展示:

 4、测试结果说明:

(1)父组件传递一个对象,子组件接受,子组件中,直接修改接受到的对象里面的值,可以修改,父子组件的值都会随之改变

(2)使用v-model传值,修改input里面的值,会报错

意思就是props传递的值不能进行修改

(3)点击修改第三个值,在子组件中的值会修改,但是父组件中不能修改,报错

5、总结:

父子组件传值时,父组件传递的参数,数组和对象,子组件接受之后可以直接进行修改,并且会传递给父组件相应的值也会修改。

如果传递的值是字符串,直接修改会报错。

不推荐子组件直接修改父组件中的参数,避免这个参数多个子组件引用,无法找到造成数据不正常的原因

6、官网说明:

https://cn.vuejs.org/v2/guide/components-props.html?

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。

额外的,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。

vue2.0 子组件props接受父组件传递的值,能不能修改的问题整理的更多相关文章

  1. 子组件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 ...

  2. 子组件props接受父组件传递的值,能不能修改的问题

    参考链接:https://www.cnblogs.com/pangchunlei/p/11139356.html

  3. vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值

    axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...

  4. vue2.0 子组件和父组件之间的传值(转载)

    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...

  5. Vue2.0 子组件和父组件之间的传值

    Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...

  6. vue2.0 子组件 父组件之间的传值

    常用的子组件给父组件传值/调父组件方法 //子组件let val = "";//可以是任意类型this.$emit('fatherFun', val); //父组件<fath ...

  7. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

  8. React子组件怎么改变父组件的state

    React子组件怎么改变父组件的state 1.父组件 class Father extends React.Component { construtor(props){ super(props); ...

  9. vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法

    Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...

随机推荐

  1. C语言--变量

    unsigned int 和 int 对计算机来讲没有区别, 只有在输出的时候, 计算机根据%d 和 %u 判断是否有符号位. %d 输出有符号的整数, %u 输出无符号整数. 无符号的整数比有符号的 ...

  2. 路由器配置——基于区域的OSPF简单认证

    一.实验目的:掌握区域的OSPF简单认证 二.拓扑图: 三.具体步骤配置: (1)R1路由器配置 Router>enable Router#configure terminal Enter co ...

  3. 2019CCPC秦皇岛自我反省&部分题解

    练了一年半了,第一次打CCPC,险些把队友坑了打铁,最后也是3题危险捡了块铜. 非常水的点双连通,我居然不相信自己去相信板子,唉,结果整来整去,本来半个小时能出的题,整到了3个小时,大失误呀,不然就可 ...

  4. 百度智能api接口汇总

    一:自然语言处理 # -*- coding: utf-8 -*- # @Author : FELIX # @Date : 2018/5/18 9:47 # pip install baidu-aip ...

  5. Django从Models 10分钟定制一个Admin后台

    目录 Django从Models 10分钟建立一套RestfulApi Django从Models 10分钟定制一个Admin后台 简介 Django自带一个Admin后台, 支持用户创建,权限配置和 ...

  6. Clion + 树莓派/Ubuntu 远程调试

    Clion进行远程调试 在大三下半学期学习Linux高级编程时,老师布置的作业要在linux机器上进行,当时完成的十分艰苦,调试难受的一匹,当时就萌生了这个想法,因为Jetbrains官方文档的晦涩( ...

  7. python 二维数组 转 矩阵

    x = numpy.array([[,,],[,,],[,,]]) print x print x.shape 输出 [[ ] [ ] [ ]] (3L, 3L) [Finished .2s]

  8. Codeforces 1238E. Keyboard Purchase

    传送门 注意到 $m$ 只有 $20$ ,考虑一下状压 $dp$ 设 $f[S]$ 表示当前确定的字符集合为 $S$ ,那么转移就考虑从最右边加入的下一个字符 $c$ 那么问题来了,代价如何计算 考虑 ...

  9. mac 配置apache

    Apache配置 对httpd.conf文件的配置.首先打开 /etc/apache2/httpd.conf文件,也就是Apache2.4的相关配置文件. 连接php 首先我们将相应的PHP版本配置进 ...

  10. 微信小程序之状态管理B

    书接上文哈 咱们定义了个状态管理对象 逻辑应该是这样的 if (json.product.activity.type == "Coin1") { this.activity.coi ...