vue报错：Avoid mutating a prop directly since the value will be overwritten whenever the parent compone

报错截图：

原因：

在 Vue.js 中，直接修改一个来自父组件的 prop（属性）是不被推荐的，因为这样做会违反组件间的单向数据流原则。当你尝试直接修改一个 prop 时，如果父组件重新渲染（例如，由于数据变化或响应式依赖更新），这个 prop 的值将会被父组件中的原始值覆盖，从而导致你的修改丢失。

修改代码：

父组件

父组件：

     
      <BankAttempt :name="BankSearchName" 
                :propDialogVisible="BankDialogVisible" 
                @updateDialogVisible="updateDialogVisible">
           </BankAttempt>

 import BankAttempt from "xxx"
export default {
    name:'parentComponent',
    components: {
       // 子组件
      BankAttempt
    },
data(){
    return{
        BankDialogVisible: false
    }
}

methods:{
     updateDialogVisible(newVal) {
          this.BankDialogVisible = newVal;
        },
}

其中：BankDialogVisible 是父组件传给子组件的值

子组件：

propDialogVisible:是接收到父组件传的值

由于props变量不推荐直接修改，所以我这里申明了一个变量dialogVisible

通过watch监听将propDialogVisible 赋给dialogVisible

同时，子组件dialogVisible发生变化通过 this.$emit('updateDialogVisible',this.dialogVisible)

通知父组件

父组件接收：

@updateDialogVisible="updateDialogVisible"

 updateDialogVisible(newVal) {
          this.BankDialogVisible = newVal;
        },

就进行双向绑定了

 export default {
    name: 'BankAttempt',
    data() {
        return{
            dialogVisible: false
        }
    }
    props: {
    
      propDialogVisible: {
        type: Boolean,
        default: false
      },
    },
    watch: {
        propDialogVisible: {
            handler(newVal, oldVal) {
                this.dialogVisible = newVal;
                if (newVal && this.tableData.length == 0){
                    this.pageQueryBankData()
                }
            },
            deep: true
        },
    },
    // 关闭弹窗
     handleCancel() {      
        this.selectedRow = {}
        this.dialogVisible = false;
        this.$emit('updateDialogVisible',this.dialogVisible)
      },