系统底层框架升级后，前端常报异常：
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders
先看一下代码：
<!-- 父组件 -->
<son :father-obj="obj"></son>
<!-- 子组件 -->
<template>
...省略html代码
</template>
<script>
export default {
props: {
fatherObj:{
type: Object,
default () {
return {}
}
},
data () {},
methods: {
clearFatherObj(){
this.fatherObj = null
}
}
}
</script>
vue官方说明：
在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。
Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。
很明显，代码中clearFatherObj()方法试图直接修改父组件的fatherObj，于是Vue报错了。
找到了原因，那么来改一下代码：
<!-- 父组件 -->
<!-- @clearFatherObj -->
<son :father-obj="obj" @clearFatherObj = "clearFatherObj"></son>
<script>
export default {
methods: {
clearFatherObj(){
this.obj= null
}
}
}
</script>
<!-- 子组件 -->
<template>
...省略html代码
</template>
<script>
export default {
props: {
fatherObj:{
type: Object,
default () {
return {}
}
},
data () {},
methods: {
clearFatherObj(){
// this.fatherObj = null
// 通过$emit一个事件通知父组件来更新，父组件调用时必需传入@clearFatherObj
this.$emit('clearFatherObj', null)
}
}
}
</script>
使用$emit通知父组件来操作，问题解决！
除此之外，还有一种代码很难跟踪问题：
<!-- 父组件 -->
<!-- @clearFatherObj -->
<son ref="form" :father-obj="fatherObj" @clearFatherObj = "clearFatherObj"></son>
<script>
export default {
methods: {
clearFatherObj(){
this.$refs.form.fatherObj = null
}
}
}
</script>
这看起来没问题啊，数据是在父子件中处理的。但是，还是会报一样的错误。
$refs 是一个直接操作子组件的应急方案,应当避免在模板或计算属性中使用
使用$ref相当于在子组件中操作了。
总的来说，就是子组件没权修改父组件的东西，想要修改怎么办？通知父组件，让它来改吧！
但是，如果传入的数据是Object类型或者array类型，子组件只想要修改它们中的值，Vue还是会睁只眼闭只眼的。例如：
changeFatherObj(){ this.fatherObj.no = 1 }// 这样就不会报错
参考：
https://cn.vuejs.org/v2/guide/components.html
https://www.cnblogs.com/kidsitcn/p/5409994.html
网友评论