vue2.0 子组件props接受父组件传递的值,能不能修改的问题整理
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接受父组件传递的值,能不能修改的问题整理的更多相关文章
- 子组件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 ...
- 子组件props接受父组件传递的值,能不能修改的问题
参考链接:https://www.cnblogs.com/pangchunlei/p/11139356.html
- vue.js+koa2项目实战(五)axios 及 vue2.0 子组件和父组件之间的传值
axios 用法: 1.安装 npm install axios --save-dev 2.导入 import axios from 'axios'; 3.使用 axios.post(url,para ...
- vue2.0 子组件和父组件之间的传值(转载)
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
- Vue2.0 子组件和父组件之间的传值
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
- vue2.0 子组件 父组件之间的传值
常用的子组件给父组件传值/调父组件方法 //子组件let val = "";//可以是任意类型this.$emit('fatherFun', val); //父组件<fath ...
- 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法
一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...
- React子组件怎么改变父组件的state
React子组件怎么改变父组件的state 1.父组件 class Father extends React.Component { construtor(props){ super(props); ...
- vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法
Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...
随机推荐
- C语言--变量
unsigned int 和 int 对计算机来讲没有区别, 只有在输出的时候, 计算机根据%d 和 %u 判断是否有符号位. %d 输出有符号的整数, %u 输出无符号整数. 无符号的整数比有符号的 ...
- 路由器配置——基于区域的OSPF简单认证
一.实验目的:掌握区域的OSPF简单认证 二.拓扑图: 三.具体步骤配置: (1)R1路由器配置 Router>enable Router#configure terminal Enter co ...
- 2019CCPC秦皇岛自我反省&部分题解
练了一年半了,第一次打CCPC,险些把队友坑了打铁,最后也是3题危险捡了块铜. 非常水的点双连通,我居然不相信自己去相信板子,唉,结果整来整去,本来半个小时能出的题,整到了3个小时,大失误呀,不然就可 ...
- 百度智能api接口汇总
一:自然语言处理 # -*- coding: utf-8 -*- # @Author : FELIX # @Date : 2018/5/18 9:47 # pip install baidu-aip ...
- Django从Models 10分钟定制一个Admin后台
目录 Django从Models 10分钟建立一套RestfulApi Django从Models 10分钟定制一个Admin后台 简介 Django自带一个Admin后台, 支持用户创建,权限配置和 ...
- Clion + 树莓派/Ubuntu 远程调试
Clion进行远程调试 在大三下半学期学习Linux高级编程时,老师布置的作业要在linux机器上进行,当时完成的十分艰苦,调试难受的一匹,当时就萌生了这个想法,因为Jetbrains官方文档的晦涩( ...
- python 二维数组 转 矩阵
x = numpy.array([[,,],[,,],[,,]]) print x print x.shape 输出 [[ ] [ ] [ ]] (3L, 3L) [Finished .2s]
- Codeforces 1238E. Keyboard Purchase
传送门 注意到 $m$ 只有 $20$ ,考虑一下状压 $dp$ 设 $f[S]$ 表示当前确定的字符集合为 $S$ ,那么转移就考虑从最右边加入的下一个字符 $c$ 那么问题来了,代价如何计算 考虑 ...
- mac 配置apache
Apache配置 对httpd.conf文件的配置.首先打开 /etc/apache2/httpd.conf文件,也就是Apache2.4的相关配置文件. 连接php 首先我们将相应的PHP版本配置进 ...
- 微信小程序之状态管理B
书接上文哈 咱们定义了个状态管理对象 逻辑应该是这样的 if (json.product.activity.type == "Coin1") { this.activity.coi ...