注册登录

1***@qq.com

发布：2019-05-30 12:02
更新：2021-02-22 16:11
阅读：27065

Avoid mutating a prop 组件传值报错

分类：uni-app

自定义组件模式 bug已确认

Avoid 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: "value"

父组件中更改子组件中的属性后，就爆出来这个东西。

我的子组件根本没有去改变父主键传过来的这个属性

这个是bug吗

2019-05-30 12:02 负责人:无分享

24 个回复

1***@qq.com

我也遇到这种情况，关键我也没改，就只用来展示，还解引用了，而且微信小程序不报错支付宝小程序报这个错，虽然不影响使用，但是看着是真的难受这些报错

liuxy - 承接各种公众号小程序app开发, 前后全包,wx或电话咨询联系18724597563

你好请问下问题解决了吗?我也遇到这个问题

1***@163.com

data（）{return{}} 在return中添加一个新的属性，用于接收传过来的属性，然后操作的时候用这个新的属性操作，不要用传过来的属性。

export default {

name: 'app-header',

props:{

title:{

type:String

}

},

data () {

return {

title1:'this is header',

newTitle:this.title

}

},

methods:{

changetitle:function(){

this.newTitle="我是新值"

}

}

}

2019-08-20 20:16
1***@163.com

单向数据流

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

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

2019-08-20 20:22
有问

回复 1***@163.com: 这个子组件，到了父组件引用后，向子组件传值传不了。

2020-11-29 13:36

黑色领带结

这个报是因为在子组件改变了接收到的值。---------子组件接收后，赋值给一个新变量，然后再使用赋值后的变量（this.currentIndex）就行了

wsi18n

看着warn难受的可以这样弄下：

Vue.config.warnHandler = function (msg) {  
  if (!msg.includes('Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.')) { // uniApp bug: https://ask.dcloud.net.cn/question/71966  
    return console.warn && console.warn(msg)  
  }  
}

1***@qq.com

可以用。给个赞

2020-04-07 15:05
九涯

治标不治本！

2020-12-01 17:07

ZGH0709

上传个 dmeo 看一下。

ilijiayin

1.9.11以上版本是出现这样的问题，请问怎么解决？

[ERROR] : [Vue warn]: Avoid 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: "values"

1***@qq.com

老铁你着问题解决没

2019-09-26 13:43

4***@qq.com

原先1.9.4没这个提示，升级到2.0.0就有了

1***@qq.com (作者) - 一句话，干，遇见问题就干他，干不了他，找办法

官方已经确定是bug，后期应该会修复吧。
应该是个误报，对正常使用没有影响

t***@163.com

请问一下这个bug修复了吗?哪里可以看到

2019-07-11 16:08

程咬金3斧头

这个应该是因为在组件内部的方法中，改变了prop 中的变量引起的

1***@qq.com

我搞的都快哭了，，，居然是bug

8***@qq.com

我也遇到这个问题了，还以为我的错。。。

t***@163.com

bug已经修复了,最新版本 + 修复自定义组件模式下，未直接修改 props 仍报 [Vue warn]: Avoid mutating a prop directly… 异常信息的Bug 详情

2019-07-15 16:50

1***@163.com - 这总没错吧

xinazai
现在还
报错么

t***@163.com

不报错了

2019-07-18 14:10
1***@163.com

回复 t***@163.com: it's good

2019-07-26 10:17
1***@qq.com

回复 t***@163.com: 我这个怎么还报错啊

2019-09-26 13:42

d***@dengyi.pro

这个问题依旧存在啊

1***@qq.com

官方解决一下这个BUG

https://ask.dcloud.net.cn/question/75006

z***@corefac.com

到目前为止还有BUG

5***@qq.com

你们的还爆这个错误吗？大佬们，我的也是这个错误

__raymond - https://segmentfault.com/u/_raymond

# 2个方法

第一个：

// 父组件  
<dialog-apply :visible.sync="dialogApplyVisible" />  

// 子组件  
<el-dialog  
      :visible.sync="visible"  
      title="申请"  
      :before-close="onClose"  
>  

onClose() {  
  this.$emit('update:visible', false)  
}

第二个：

// 父组件  
<dialog-apply :visible.sync="dialogApplyVisible" @close='dialogApplyVisible = false' />  

// 子组件  
<el-dialog  
      :visible.sync="visible"  
      title="申请"  
      :before-close="onClose"  
>  

onClose() {  
  this.$emit('close')  
}

这2个方法，:before-close 是关键；