• 问题描述：原本项目中是一个父组件以及一个弹框子组件，弹框中的数据仅仅用于显示，原始的子组件中props中定义record，

                        现在在原本需求之上，需要对弹框里的内容进行改变，比如弹框表格新增记录，此时props中的record需要改变，若是继续直接采用record就会可能出现报错

•  原本代码：

//父组件中（handleRecordDialog为子组件）
//html
handleRecordDialog(:record="record)

//js部分
import handleRecordDialog from '@self/components/'
record:[]

//子组件中
props:{
   record:{
      type:Array,
      default:()=>[{}]
  }
}

• 解决方法：将:record换成:recordData,在子组件中，定义record:[ ],在watch里面监听recordData，这样我们就可以直接操作改变record值了

//父组件中：
handleRecordDialog(:recordData="record")

//子组件中：
props:{
   recordData:{
       type:Array,
       default:()=>[{}]
  }  
}


data(){
  return {
   record:[]
   }
}

watch:{
   recordData:{
       handle(val) {
         this.record = JSON.parse(JSON.stringfy(val))
      },
    immediate:true
  },
}