vue父组件向子组件传对象,不实时更新解决
vue报错:void 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:
看了很多大佬的方法,恕我直言,没有一个有用的,试了两天没什么用;
最后唯一的解决办法就是父子双向传参解决,话不多说,代码如下:
// 父组件引用
<hi-popSelect :isShow="isShow" @func="getMsg"></hi-popSelect>
import popSelect from '../components/popSelect';
components: {
'hi-popSelect': popSelect
},
data(){
return {
isShow: false
}
}
methods: {
getMsg (data) {
this.isShow = data;
},
}
子组件:(我用的是elements的dialog对话框为例)
<el-dialog class="hi-dialog"
:visible.sync="currentIsShow">
</el-dialog>
// 父子传参(父传子)
props: ['isShow'],
data(){
return {
currentIsShow: this.isShow, // 在data里重新赋值,不改变父组件传值
}
}
watch: {
// 监听父组件传参变化重新赋值
isShow (val) {
this.currentIsShow = val;
}
},
methods: {
// 关闭对话框并把值传给父组件 (子传父)
hideData () {
this.$emit('func', this.currentIsShow);
},
}
以上方法完美解决问题,如有更好的解决方法请大佬在下方留言,十分感谢!
作者:时来运转
大佬们好,我是Web前端菜鸟,初来乍到,想跟诸位共同学习成长;
综上是我每日闲时整理笔记,文章如有侵权请诸位及时告知我,谢谢关照!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)