Vue3组件通讯——自定义事件（子-＞父）

需求如下：

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 @updateUserProfile="getUserInfo"/>

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.code==200){Object.assign(user,res.data)userStore.setUserInfo(toRaw(user))}});resolve(); //调用 resolve 表示事件处理完成
};