[Vue-bug] 父组件通过props传值给子组件时，避免子组件修改值

[Vue-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: “isDialogShow”

父组件通过props传值给子组件，避免子组件改变props值

修改前的代码

//子组件addUser

//使用isDialogShow的值，省略了部分代码
<el-dialog :visible.sync="isDialogShow"></el-dialog>  

//这里不能直接修改isDialogShow的值
<el-button @click="isDialogShow=true">取消</el-button>
<script>
export default {
  name: "addUser",
  props: {
    //添加用户对话框的显示与隐藏
    isDialogShow: {
      type: Boolean,
      default: false,
    },
  },
  };
</script>

//父组件       
<add-user :isDialogShow="isDialogShow"/>

<script>
export default {
  name: "table",
  data() {
    return {
      isDialogShow: false,
  </script>

修改后的代码

//子组件addUser

//使用isDialogShow的值，省略了部分代码
<el-dialog :visible.sync="isDialogShow"></el-dialog>  

<el-button @click="isDialogShow">取消</el-button>
<script>
export default {
  name: "addUser",
  props: {
    //添加用户对话框的显示与隐藏
    isDialogShow: {
      type: Boolean,
      default: false,
    },
  },
    methods: {
    //发送事件dislogClose给父组件
    //点击“取消”按钮或“确认”按钮后关闭添加用户对话框
    dialogClose() {
      this.$emit("dialogClose");
    },
  },
  };
</script>

//父组件       
//父组件监听dialogClose事件，并修改子组件的dislogClose的值
<add-user :isDialogShow="isDialogShow"  @dialogClose="dialogClose" />

<script>
export default {
  name: "table",
  data() {
    return {
      isDialogShow: false,
      }
      },
      methods:{
      dialogClose() {
      this.isDialogShow = false;
    },
}
  </script>