现状
在编辑时，只有第一次点编辑时，才能正确显示。随后再点编辑，数据显示不正确了
原因
现在的代码中，获取详情这个动作在子组件的created中发出的，而created钩子只会执行一次：后续点击关闭弹层时，子组件被没有销毁，它只是隐藏了。
解决方案1：在关闭弹层时，把子组件销毁
在关闭弹层时，把子组件销毁，再次打开时，重新创建(created再走一遍)，就重发请求
v-if为false时，子组件会被删除！
优点：简单，有效；
缺点：有性能消耗，其中的ajax请求也会随着组件的创建和销毁重复执行
解决方案2：在父组件中通过引用找到子组件
在父组件中，每次打开弹层时，找到子组件，要求它去发请求获取详情
添加引用:
<DeptDialog
:id="curId"
+ ref="deptDialog"
:is-edit="isEdit"
@success="hAddSuccess"
/>
在编辑时：找到子组件，要求它去发请求获取详情
// 用户点了编辑
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()
}
},
小结
如何判断组件是销毁了，还是隐藏了？在vue调试工具
组件没有销毁，则created/mounted钩子函数只执行一次
解决编辑组件中遇到数据残留的问题-总结
背景：
- 编辑和新增共用一个组件
- 编辑会有数据回填 & 表单校验
方案1： v-if 用在子组件上
方案2：
- 在父组件中点击编辑时，直接通过引用的方式去执行子组件中的加载详情功能，初始化表单数据
- 弹层隐藏时，清空表单数据
小结：
通过引用去操作组件，尽量少用！
