编写时候注意的东西

1 父组件通过props传递异步数据，子组件接收

https://blog.csdn.net/shsyzhzhgn/article/details/138124529

2 点1有邮箱，点2 没有邮箱返回

props接收不到数据，不会变化

用watch接的话， 如果没有发生变化（同一个邮箱）， 不会更新下一个数据

加定时器，获取到在props

3 计算属性

props拿到就可以用计算属性吗

4 什么时机下用computed

计算属性 ，只能监听基本数据类型，不能监听引用数据类型，

监听引用数据类型用watch

5 清零

点启动的时候，没有吧taskForm.value.estimateConsumeUse 清空

下次进入的时候taskForm.value.estimateConsumeUse = 2 。再调一遍变成4

======》 取消，上一步，启动 都要清除！！！

响应式数据多会 一直存在吗？

6 想修改props 数据，怎么修改

props里边是个form. 用v-model = “form” 会报错

用watch也不对

编辑

后改成：打开弹框传进去

错误思路：

1 dept不能修改， 用watch监听一下：赋值给新的变量进行修改，

问题： currentDept 发生改变， depth也发生了改变，因为是浅拷贝， 用了json.pase(json.stringify(value))

还有问题： 修改后，取消，再点进去，发现currentpet 还是变化后的值，

因为watch监听dept，你在进入编辑弹框，还是没有变化，不会重新赋值给currentDept。导致currentDept还是变化后的值

解决：

发生改变的值(currentDept)，不用watch,

如果不改变，可以用computed

<template><div class="selectDrawer"><Drawer title="编辑部门" ref="drawer" size="40%"><!-- 内容 --><template #content><!-- 条件 --><el-form :model="currentDept" label-position="top" :rule="deptRules" ref="deptRef"><el-form-item label="部门名称" prop="name"><el-input v-model="currentDept.name" placeholder="请输入" /></el-form-item><el-form-item label="部门主管" @click="openPerson"><div class="leader"><div class="leader_name" v-if="Object.keys(choosePerson).length === 0">请选择</div><el-tag v-else closable @close="deletePerson">{{ choosePerson[0].userName }}</el-tag><div class="leader_icon"><el-icon color="#A8ABB2"><ArrowDown /></el-icon></div></div></el-form-item><el-form-item label="上级部门"><el-select v-model="currentDept.parentId" placeholder="请选择"><el-optionv-for="item in parentDept":key="item.deptId":label="item.name":value="item.deptId"/></el-select></el-form-item><el-form-item label="部门描述"><el-inputv-model="currentDept.description"maxlength="300":rows="5"type="textarea"show-word-limitplaceholder="请输入描述信息"/></el-form-item></el-form></template><!-- 按钮 --><template #foot_button><el-button @click="handleClose">取消</el-button><el-button type="primary" @click="editDept($parent)">保存</el-button></template></Drawer></div><!-- 选人框 --><ChoosePersonDrawref="chosePersonDrawer"@select_person="selectPerson":defaultSelected="choosePerson"/>
</template><script lang="ts" setup>
import { ref } from "vue"
import DeptAPI from "@/api/dept/index.ts"
import Drawer from "@/components/common/Drawer.vue"
import ChoosePersonDraw from "@/components/common/ChoosePersonDraw.vue"
import { ArrowDown } from "@element-plus/icons-vue"const props = defineProps({dept: {type: Object,default: () => {}}
})const currentDept = ref<any>([])
watch(() => props.dept,(value) => {currentDept.value = JSON.parse(JSON.stringify(value))},{ deep: true }
)/** 删除人员 */
const deletePerson = () => {choosePerson.value = {}
}/** 打开选人框 */
const chosePersonDrawer = ref<InstanceType<typeof ChoosePersonDraw> | null>(null)
const openPerson = () => {chosePersonDrawer.value?.selectOpen()
}/** 查询上级部门 */
const parentDept = ref<any>([])
const selectParentDept = async () => {try {const res = await DeptAPI.queryParentDept()parentDept.value = res.data} catch (error: any) {console.log(error)if (!error.msg || error.msg != "") {ElMessage.error(error.msg)}}
}/** 获取人员 */
const choosePerson = ref<any>([])
const selectPerson = (singlePerson: any) => {choosePerson.value = []choosePerson.value.push({ userName: singlePerson[0].name, id: singlePerson[0].userId })console.log(choosePerson.value)currentDept.value.leaderId = singlePerson.id
}/** 校验 */
const deptRules = {name: [{ required: true, message: "部门名称不能为空", trigger: "change" }]
}/** 编辑 */
const deptRef = ref()
const editDept = async (parent: any) => {try {await deptRef.value.validate()await DeptAPI.editDept(currentDept.value)drawer.value?.isClose()ElMessage({message: "添加角色成功",type: "success"})parent.getDeptList()} catch (error: any) {if (!error.msg || error.msg != "") {ElMessage.error(error.msg)}}
}/** el-drawer 展开关闭 */
// 关闭
const drawer = ref<InstanceType<typeof Drawer> | null>(null)
const handleClose = () => {drawer.value?.isClose()
}// 打开
const selectOpen = () => {//查询部门列表selectParentDept()drawer.value?.isOpen()
}
defineExpose({selectOpen
})
</script><style lang="scss" scoped>
// 主管
.leader {width: 100%;height: 32px;background: #ffffff;border: 1px solid #dcdfe6;border-radius: 4px;display: flex;justify-content: space-between;align-items: center;padding: 0px 12px;.leader_name {font-family: PingFangSC-Regular;font-weight: 400;font-size: 14px;color: #a8abb2;}
}// 修改el-form-item 字体
:deep(.el-form--default.el-form--label-top .el-form-item .el-form-item__label) {font-family: PingFangSC-SNaNpxibold;font-weight: 600;font-size: 14px;color: #333333;
}
:deep(.el-textarea .el-input__count) {color: #a8abb2;
}
</style>

6.1 修改

localFormData 能拿到数据吗？

这么写是浅拷贝，拷贝的是引用地址，一个变化其他也跟着变化

这要写深拷贝Json.parse(json.stringfi(props.formData))

7加载页面

父组件然后完毕，子组件是不是也渲染完毕

8

dom更新是异步的,他没初始化你就执行逻辑就会导致,加上个setTimeout或者await nextTick()就行

调试：

点击发现 props.emailValue没有变化，变化的慢

加一个setTimeout

看父组件是否获取到值，和子组件是否接受到

父组件没有获取到值是逻辑问题， 子组件没有接收到可能是异步操作，加一个nextTick