vue 常见数据增删改查，

需求： 数据的增删改查

场景： vue + iview 

点击增加，抽屉填写内容，保存数据，修改数据

实现：

1 list 列表

父组件

2 增加，修改页面

子组件

3 父子组件之间传参

（1）通过props

//子组件中要
props: {
        value: Boolean,
        editForm: {//编辑传参
            type: Object,
            default: () => {
                return {}
            }
        },
    },
//监听
editForm(n, o) {
          if (n.dictId) {
                  this.dicForm = n,
                //   保存老的电话号码
                  this.OldDicForm = n;
              }
          }
///父组件中给

（2）通过ref

this.$refs['dicForm'].dicForm = param

4 传参注意事项，

eg： dictItemPos参数是个数组，

let param = {
                    dictName: params.dictName,
                    dictId: params.dictId,
                    pageId: params.pageId,
                    dictItemPos: params.dictItemPos,
                }

如果按照步骤3传值，然后修改，editForm中的数据也会直接修改

5 解决方式

editForm(n, o) {
              if (n.dictId) {
                //   ...浅拷贝。添加选项，会直接加到editForm中
                  this.dicForm = deepCopy(n),
                //   保存老的电话号码
                  this.OldDicForm = deepCopy(n);
              }
          }




//or
this.$refs['dicForm'].dicForm = deepCopy(param)
this.$refs['dicForm'].OldDicForm = deepCopy(param)

6  对参数进行增删改

步骤5中的OldDicForm 参数是保存老数据进行对比的，

修改数据：通过id判断是新增还是删除的老数据

// 修改需要对比老数据，删除的数据isDelete为true
                let newDicItem = [];
            // 当前字典选项id数组
            this.dicForm.dictItemPos.map(item => {
                newDicItem.push(item.dictId)
            })
            for (let i = 0; i< this.OldDicForm.dictItemPos.length; i++) {
                let item = this.OldDicForm.dictItemPos[i];
                if (!newDicItem.includes(item.dictId)) {
                    item.isDeleted = true;
                    this.dicForm.dictItemPos.push(item)
                }
            }

问题：

props 和$refs的区别