一、错误提示
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: "chooseTable"
二、原来的错误代码
1)父组件
<NewAccountTable
//通过prop传递过去的值为dialogVisible,dialogVisible为data中的值
:desShow="dialogVisible"
>
</NewAccountTable>
2)子组件:
props: ["chooseTable", "desShow"],
watch:{
desShow(newValue){
if(!newValue){
window.removeEventListener("keydown", this.KeyDown, false);
//*这是就是犯错误的代码了,直接修改了prop传递过来的属性*
this.chooseTable = "";
// 把当前保存的单元格设置为空
this.currCell= null,
// 失去焦点
this.blur();
this.accountTableData = [];
}
}
}
三、解决思路
既然是通过prop传递过来的值,在父组件中监听修改不就好了
1)父组件
dialogVisible(newValue) {
if (!newValue) {
this.chooseTable = "";
}
},
2)子组件
~~this.chooseTable = "";~~ //去掉
四、总结
通过prop传递过来的数据,不要直接在子组件中修改,既然是prop传递来的(desShow),父组件一定是在data中写好的属性。所以,监听data中的值(dialogVisible)也可以达到一样的效果
五、个人感言
虽然是一个警告⚠️,但是瞅着就是难受😣