组织架构-编辑-修复-显示详情不准确

在编辑时，只有第一次点编辑时，才能正确显示。随后再点编辑，数据显示不正确了

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

解决方案1（ v-if ）：在关闭弹层时，把子组件销毁

v-if 为 false 时，子组件会被删除！

优点：简单，有效；

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

解决方案2：在父组件中通过引用找到子组件

在父组件中，每次打开弹层时，找到子组件，要求它去发请求获取详情

添加引用（ref）:

<DeptDialog
        :id="curId"
        ref="deptDialog"
        :is-edit="isEdit"
        @success="hAddSuccess"
      />

在编辑时：找到子组件，要求它去发请求获取详情 ( $nextTick方法 )

// 用户点了编辑
    hEdit(id) {
      // 1. 保存当前操作的部门编号
      this.curId = id
      // 2.显示弹层
      this.showDialog = true

      // 3. 修改isEdit
      this.isEdit = true

+     // 获取子组件的引用
+     this.$nextTick(() => {
        console.log('获取子组件的引用', this.$refs.deptDialog)
        console.log('当前的curId', id)
        console.log('获取到子组件中的id--从父传入的', this.$refs.deptDialog.id)
        // 调用子组件的方法
        this.$refs.deptDialog.loadDepartmentDetailById()
      })
    },

解决方案3：在组件内监听id的变化

在子组件内部（deptDialog.vue）添加一个侦听器：监听当前id的变化

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