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() {
  // 创建一个Promise来等待父组件的处理
  const eventCompleted = new Promise((resolve) => {
    emit('updateUserProfile', resolve);
  });

  // 等待父组件操作完成
  await eventCompleted;

  // 父组件操作完成后调用 init()
  init();
}