版权声明：1.版权归原作者Moment ° 回忆 ✨所有； 2.未经原作者允许不得转载本文内容，否则将视为侵权； 3.转载或者引用本文内容请注明来源及原作者； 4.对于不遵守此声明或者其他违法使用本文内容者，本人依法保留追究权等。 https://blog.csdn.net/qq_35366269/article/details/84950106
问题：
vue.esm.js?efeb:591 [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: "isShowDialog"
found in
当子组件利用v-modle直接绑定父组件传入的值，然后子组件中再修改父组件的值时会出现如上错误，详细BUG代码如下：
子组件：
<template>
<el-dialog title="测试" :visible="isShowDialog" @close="hideData()" width="80%" >
<span slot="footer" class="dialog-footer">
<el-button @click="isShowDialog = false">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
name: "TestDialog",
props :{
isShowDialog:{
type:Boolean,
default:false,
},
},
methods:{
hideData() {
this.$emit("hideDialog")
},
confirm() {
this.isShowDialog = false;
},
}
}
</script>
<style scoped>
</style>
父组件：
<test-dialog :isShowDialog="isShowTestDialog"
v-on:hideDialog="isShowTestDialog = false"></test-dialog>当点击取消或是确定时就修改了父组件传入的isShowDialog变量，这时候就会出现BUG
解决办法：
思路：把子组件的控制权给父组件，让父组件来控制子组件对护框的显示和隐藏，子组件不做控制即可。
子组件：
<template>
<el-dialog title="测试" :visible="isShowDialog" @close="hideData()" width="80%" >
<span slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="confirm">确 定</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
name: "TestDialog",
props :{
isShowDialog:{
type:Boolean,
default:false,
},
},
methods:{
hideData() {
this.$emit("hideDialog")
},
confirm(){
this.hideData();
},
cancel(){
this.hideData();
}
}
}
</script>
<style scoped>
</style>
父组件：
<test-dialog :isShowDialog="isShowTestDialog"
v-on:hideDialog="isShowTestDialog = false"></test-dialog>