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 表示事件处理完成
};