vue父子组件赋值操作时报错Avoid mutating a prop directly since the value will be overwritten whenever

前言: 我写了一个组件,然后子组件外层绑定了一个v-model=‘moreInquiriesCard’, 这个值通过props取的父组件传过来的值,子组件是个modal弹框,对默认右上角有个"x"跟右下角取消按钮,在子组件内部直接操作props的moreInquiries为false,然后一点击子组件取消按钮或者右上角的’x’就会报错,如下图

错误原因很简单: 就是你在子组件内部直接改动了props中的数据,在vue2中组件props中的数据只能单向流动,不能直接修改由父组件props传过来的值,

// 父组件
<template><Button size='small' type='primary' @click='getMapInFo'></Button><more-inquiries :key='timer' :moreInquiriesCard='moreInquiriesCard'></more-inquiries>
</template>
<script>import moreInquiries from '@/components/moreInquiries.vue';export default {name:'cardPro',components: { moreInquiries }data () {return {moreInquiriesCard : false,timer: ''}},created () {},methods: {// 点击按钮弹出子组件getMapInFo () {this.timer = new Date().getTime()this.moreInquiriesCard = true}}}
</script>

子组件是一个modal弹框,解决的方法很简单,
方法一: 要么在点击取消或者右上角’x’关闭写一个事件,$emit调用父组件的方法,在父组件里面去改变moreInquiriesCard的值
方法二: 不要直接操作props的值,那就在组件初始化的时候把props的值赋值给其他变量(我用的这种)

// moreInquiries 子组件代码
<template><div class='more-inquiries'><Modal scrollable v-model='moreInquiries' :mask='false' title='更多查询条件' width='65%'>//写自己弹框里面的需求</Modal></div>
</template>
//js
<script>export default {name:'moreInquiries',props: {moreInquiriesCard: {type: Boolean,default: false}}data () {return {moreInquiries: this.moreInquiriesCard  // 避免直接操作props里面的值}},}
</script>

vue父子组件赋值操作时报错Avoid mutating a prop directly since the value will be overwritten whenever相关推荐

vue 报错avoid mutating a prop directly since the value will be overwritten whenever
这里写自定义目录标题 avoid mutating a prop directly since the value will be overwritten whenever 子组件修改父组件值时报的错 ...
vue修改props传过来的值报错Avoid mutating a prop directly since the value will be overwritten whenever the par
在做项目时有时候会遇到这种错误这句话的意思是说,避免直接改变道具,因为只要父组件重新渲染,该值就会被覆盖.相反,使用基于道具值的数据或计算属性. 就是不能直接改变父组件传过来的props,所以怎么办 ...
解决报错：Avoid mutating a prop directly since the value will be overwritten whenever
哈喽大家好啊最近我在进行父子组件通信得时候,发现控制台报错这个因为我这里是附件上传得功能,我对附件得fileList进行了修改大概意思是因为我fileList是父组件传值到子组件然后我得附件各 ...
前端开发：Vue报错Avoid mutating a prop directly since the value will be…的解决方法
前言前端开发中,在使用Vue开发的时候,经常会遇到一些很共性的报错提示,而且有时候提示已经很明确的告诉开发者问题出现在哪里,尤其是在Chrome的控制台输出上面,只要看一下输出日志就知道问题所在.但 ...
【VUE】异常解决：Avoid mutating a prop directly since the value will be overwritten
author: date: 2021.07.03 文章目录 1. 需求及报错 2. 分析原因 2.1 这是什么原因造成? 3. 解决方案: 使用 v-on 明确实现修改方式 4. 参考 1. 需求及报 ...
【VUE】异常解决：Avoid mutating a prop directly since the value will be overwritten ...
author: jwensh date: 2021.07.03 文章目录 1. 需求及报错 2. 分析原因 2.1 这是什么原因造成? 3. 解决方案: 使用 v-on 明确实现修改方式 4. 参考 ...
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever...
报错 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the paren ...
VUE报错__Avoid mutating a prop directly since the value will be overwritten whenever the parent
1. vue报错: Avoid mutating a prop directly since the value will be overwritten whenever the parent com ...
vue使用prop通信出错:Avoid mutating a prop directly since the value will be overwritten whenever the parent
使用props进行父子组件通信时产生错误:Avoid mutating a prop directly since the value will be overwritten whenever the ...

vue父子组件赋值操作时报错Avoid mutating a prop directly since the value will be overwritten whenever

vue父子组件赋值操作时报错Avoid mutating a prop directly since the value will be overwritten whenever相关推荐

最新文章

热门文章