[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>