[Vue warn]: Avoid mutating a prop directly since the value will be overwritten vue报错

[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: "dialogVisibleEdits"

这个警告信息是 Vue.js 框架给出的，意味着你在子组件中直接修改了从父组件传递过来的属性（prop）dialogVisibleEdits。在 Vue 中，props 是单向数据流的一部分，意味着它们应该只从父组件流向子组件，而不应该被子组件修改。

如果你试图在子组件中直接改变 dialogVisibleEdits 的值，这会导致当父组件重新渲染时，你在子组件中做的任何修改都会被父组件传递过来的新值覆盖。

我遇到这个情况不是我手动修改从父组件传过的值，而是我把ui组件的弹框封装成了子组件，在执行右上角叉号“X”关闭时，报错的，找了好久，没找到原因，可能是组件的内部执行的，后来我就给传过来的值，用computed计算属性，这才解决问题，对此，有感而发，建议以后父组件传过来的值，子组件需要更改时的情况，建议先计算属性赋值，再使用 data 属性给其赋一个变量，就可随意修改了~，这样也可实现页面加载时，子组件的dom即使渲染出来~

为了解决这个问题， 建议你使用以下方法之一：

1. 使用 data 属性：在子组件中创建一个新的 data 属性，并将 prop 的值赋给它。然后你可以修改这个 data 属性而不会影响到 prop。

   export default {  
     props: ['dialogVisibleEdits'],  
     data() {  
       return {  
         localDialogVisibleEdits: this.dialogVisibleEdits  
       };  
     },  
     // 后续你可以修改 localDialogVisibleEdits 而不是 dialogVisibleEdits  
   };

2. 使用计算属性：如果你只是想基于 prop 的值做一些计算或转换，而不改变它本身，你可以使用计算属性。

   export default {  
     props: ['dialogVisibleEdits'],  
     computed: {  
       // 这里可以返回一些基于 dialogVisibleEdits 的计算值  
       computedDialogVisibleEdits() {  
         // 示例：简单返回 prop 值，但你可以添加任何你需要的逻辑  
         return this.dialogVisibleEdits;  
       }  
     },  
     // 使用 computedDialogVisibleEdits 而不是 dialogVisibleEdits  
   };

       父组件：

<child-component :dialogVisibleEdits.sync="parentDialogVisibleEdits"></child-component>

或者：

// 在父组件中  
methods: {  
  handleDialogVisibilityUpdate(newValue) {  
    this.parentDialogVisibleEdits = newValue; // 更新 prop 绑定的数据  
  }  
}  
// 并在模板中监听事件

注意：.sync 修饰符是 Vue 2.3.0+ 提供的一个语法糖，它会自动扩展成一个 update:myPropName 事件监听器。