总结

在详情页中使用v-model上传头像

<el-form-item label="员工头像">
  <!-- 放置上传图片 -->
  <upload-img v-model="imageUrl" />
</el-form-item>

使用element组件库upload-img:自定义组件,使用v-model进行双向绑定.

步骤

1. 子组件定义props value来接收父组件传入的图片地址

2. 直接用value来显示图片

 <img v-if="value" :src="value" class="avatar">
 //省略
 props:["value"]

在父组件中

<upload-img v-model="头像地址"></upload-img>

这样值就会被传进去

在子组件把拿到的value值就会给到props

3. 在上传成功之后，this.$emit(‘input’, 新地址)， 抛给父组件，达到更新父组件中v-model绑定数据项