vue2.0 子组件props接受父组件传递的值,能不能修改的问题整理
1、 vue中,父子组件通信最常用的方式就是props和 $emit,但是父组件传递给子组件的数据,能不能进行修改,修改后都有啥问题呢
2、先上代码:
父组件代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <!-- --> < 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 > |
子组件代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | <!-- --> < 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 会在浏览器的控制台中发出警告。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)