新增-修改组件共用时-显示详情不准确的问题

在工作中有时我们会遇到当新增和修改功能共用，在编辑时，只有第一次点编辑时，才能正确显示。随后再点编辑，数据显示不正确的情况。

当我们第一次点击了行政部的编辑部门的时候弹层弹出的结果是：

而当我们再次点击其他部门的编辑部门时显示详情的数据并没有改变还是第一次点击的数据

追究其原因：

现在的代码中，获取详情这个动作在子组件的created中发出的，而created钩子只会执行一次：后续点击关闭弹层时，子组件被没有销毁，它只是隐藏了。

正对于这个情况总结有一下三种解决方案

方案一：

在关闭弹层时，把子组件销毁，再次打开时，重新创建(created再走一遍)，就重发请求

当showDialog为false时会将这个子组件删除，再次打开重新创建

优点：

简单，有效

缺点：

会有性能消耗，其中的ajax请求也会随着组件的创建和销毁重复执行

方案二

在父组件中通过引用找到子组件

1.添加引用

2在编辑状态下：找到子组件，要求它去发请求获取详情

这个方法在解决这个问题上是没有什么太大的问题的，当对于Vue来说用引用去操作数组这样的方法尽量少用！

方案三

在组件内监听id的变化

1.在子组件内部，添加一个侦听器：监听当前id的变化

watch: {
    'id': function(newVal, oldVal) {
      console.log('id变了！ 新值：', newVal, '旧值', oldVal)
      // 重发请求获取详情
      this.loadDepartmentDetailById()
    }
  },

缺点：在当前的问题中这个解决方案可能会有效果，但是当前id不一定会变化，对于后续的代码会有较大的影响。