笔者在使用若依前后端分离框架中 有这么一个需求，用户上传图片上传，在列表中某列实现预览效果。

这种效果在框架中有对应的组件 分别为 ImageUpload 和 ImagePreview 组件。具体使用的时候，有一个点需要注意，就是 ImageUpload 这个组件在上传完附件以

后，父组件怎么获取到这个路径地址，更改本对象下的对应的图片路径地址字段值呢？这就涉及到VUE下的子组件向父组件传值的问题。

废话不多说，直接上代码：

1：调用方VUE文件（列表 图片预览 这个没啥说的 只要字段有值 这个组件自动预览图片）

<!--列表中的某列的图片预览--->
<el-table v-loading="loading" :data="caseList" @selection-change="handleSelectionChange">
  ....
  <el-table-column label="缩略图" align="center" prop="sltUrl">
    <template  slot-scope="scope">
      <ImagePreview :src="scope.row.sltUrl" />
    </template>
  </el-table-column>
...
</el-table>

2：调用方VUE文件（图片上传）

<!--弹出的编辑弹框 上传图片-->
<el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    ...
    <el-form-item label="缩略图" prop="sltUrl">
     <ImageUpload v-model="form.sltUrl" placeholder="请上传缩略图" @input="handleSlt"></ImageUpload>
    </el-form-item>
    ...
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitForm">确 定</el-button>
    <el-button @click="cancel">取 消</el-button>
  </div>
</el-dialog>

...
methods: {
    handleSlt(slturl){
  if (slturl)
      this.form.sltUrl=slturl
   }
}

注意此处的

@input="handleSlt"

3：子组件 ImageUpload（若依框架中封装的）

看其组件中此处代码

// 删除图片
handleRemove(file, fileList) {
    ...
    this.$emit("input", this.listToString(this.fileList));
  }
},
// 上传成功回调
handleUploadSuccess(res) {
    ...
    this.$emit("input", this.listToString(this.fileList));
    this.$modal.closeLoading();
  }
}

4：子组件向父组件传值

第一步：在子组件中需要向父组件传值处使用this.$emit("function",param); 

其中function为父组件定义函数，param为需要传递参数

第二步：2. 在父组件中子组件引用处添加函数v-on:function="function1"；

其中function为子组件中定义函数，function1为父组件定义函数 --用于接收子组件传值并进行相应数据处理，可定义为同一名称

v-on： 可用 @ 代替 @function="function1" ， @ 为 v-on：的简写