郑州网站建设 推广,淘宝客导购网站 丢单,用html5做的网站源码,金融网站建设内容需求如下#xff1a;
1.在子组件中#xff0c;当用户点击提交按钮后#xff0c;更新数据库
2.数据更新成功后#xff0c;子组件通知父组件getUserInfo函数#xff0c;重新获取数据#xff0c;同步更新
3.子组件等待getUserInfo函数执行完毕后#xff0c;调用init函数…需求如下
1.在子组件中当用户点击提交按钮后更新数据库
2.数据更新成功后子组件通知父组件getUserInfo函数重新获取数据同步更新
3.子组件等待getUserInfo函数执行完毕后调用init函数获取父组件更新后的数据 在子组件中当用户点击提交按钮后更新数据库
// 提交表单的方法
async function submit() {// 更新用户配置文件const res await updateUserProfile(form);if (res.code 200) {ElMessage.success(res.msg);await emitEventAndUpdate() //调用自定义事件} else {ElMessage.error(res.msg || 更新失败);}
}2.数据更新成功后子组件通知父组件getUserInfo函数重新获取数据同步更新 在子组件中定义 自定义事件父组件中定义该事件需要调用的方法
//在子组件中定义自定义事件
const emit defineEmits([updateUserProfile]);
//在父组件中定义该事件所需要调用的方法
userInfo updateUserProfilegetUserInfo/
3.子组件等待getUserInfo函数执行完毕后调用init函数获取父组件更新后的数据
// 在子组件促发事件,并等待父组件处理完成
async function emitEventAndUpdate() {await new Promise((resolve) {emit(updateUserProfile,resolve); // 将 resolve 传递给父组件});init(); // 等待事件完成后调用 init()
}//父组件处理完成后执行resolve()表示处理完成
async function getUserInfo(resolve) {const res await getUserProfile().then(res {if(res.code200){Object.assign(user,res.data)userStore.setUserInfo(toRaw(user))}});resolve(); //调用 resolve 表示事件处理完成
};
