使用defineEmits()实现父组件子组件同步头像更换操作

父组件 Home.vue

<template>

 <!-- @update="updateAdmin"同步更新头像操作 通过子组件传父组件  -->

 <router-view @update="updateadmin"/>

</template>

<script  setup>

//动态换头像-->接收子组件传过来的数据

const updateadmin = (admin) => {

  adminLS.admin=admin

}

</script>

子组件 person.vue

//监听父级数据交互达到随时更新数据

const emits = defineEmits(['update'])

const upload = () =>{

  //保存当前的用户信息到数据库

  request.post('/admin/updateAdmin',adminLS.admin).then(res=>{

      if(res.code === "200"){

        ElMessage.success("保存成功")

       

        // 更新浏览器缓存的用户信息

        localStorage.setItem('honey-admin',JSON.stringify(adminLS.admin))

        // this.$emit('update-admin', adminLS.admin);

        //触发父级（Home.vue）的数据更新

         emits('update',adminLS.admin)

      }else{

        ElMessage.error(res.msg)

      }

  })

}