Vue 父、子组件通信笔记_vue父组件调用子组件中el-upload方法-优快云博客

本文记录了在Vue中实现父子组件通信的实践过程，包括父组件监听子组件消息、通过props传递数据以及子组件触发事件通知父组件等关键步骤。详细介绍了如何在父组件中使用子组件，并在子组件中处理图片上传成功后的反馈，以实现数据的双向同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父、子组件之间的消息相互传递

最近自己写的demo中有涉及到父、子组件消息的及时通信需求。

需求：

父组件需实时监听子组件发出消息
父组件向子组件传递了一张图片的地址
如果图片地址为空则显示上传的按钮，上传成功后，再将图片路径返回给父组件

父组件中使用子组件：

@uploadCover ：给子组件绑定一个名为 img 的事件

:parentImg ：给子组件传递属性

<template>
	<my-upload-image @uploadCover="img" :parentImg="parentImg"/>
</template>
<script>
 export default {
	data(){
      return {
        parentImg:''
      }
    },
   methods:{
     img(path){
       console.log("子组件上传图片后的路径为：",path)
       this.parentImg = path;
     }
   }
 }
</script>

子组件：

UploadSucess ：上传图片成功后的回调函数，通过 $emit 让父组件监听到消息的变化
props ：从父组件获取属性值

<template>
  <div style="margin-top: 2vh">
    <el-upload
               v-if="showImgDiv === false"
               class="upload-demo"
               drag
               :limit="1"
               action="/admin/images"
               :on-success="UploadSucess"
               multiple>
      <i class="el-icon-upload" v-if="parentImg === ''"/>
      <div class="el-upload__text" v-if="parentImg === ''">
        将文件拖到此处，或<em>点击上传</em>
      </div>
      <img
           v-else
           :src="parentImg"
           width="360px"
           height="180px"
           />
    </el-upload>
  </div>
</template>

<script>
 export default {
   props: ['parentImg'],
   methods:{
     UploadSucess(res){
       	 this.$emit('uploadCover', res.data)
     }
   }
 }
</script>