SpringBoot+VUE实现父组件刷新页面(添加监听事件)

                                                               SpringBoot+VUE实现父组件刷新页面

  • 子组件让父组件刷新页面 (监听事件)

 

  • 下图显示的是父组件的页面,则父组件引用子组件,实现流程是:父组件上添加 " @showInsurInformation="insuranceInformations"  "作为一个监听事件,一旦子组件点击事件则父组件就会监听到子组件响应的事件,所以在子组件加上一个点击事件 " @click="ossUpload" ",最后一步就是在子组件点击事件方法中加上" this.$emit('showInsurInformation')//添加监听事件 "

        

上面 "点击上传" 按钮代码如下:

<formImgUpload class="formImgUpload" id="formImgUpload"  @showInsurInformation="insuranceInformations" />

子类组件代码如下:

<template>
    <el-upload
            v-if="show"
            class="upload-demo"
            :drag="drag"
            :accept="'image/png, image/jpg, image/jpeg'"
            :action="fileUploadUrl"
            :http-request="getPolicy"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :multiple="multiple"
            :limit="limit"
            :disabled="disabled"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :on-success="handleSuccess"
            :list-type="listType"
            :preview-src-list="srcList">
        <slot v-bind:disabledButton="disabledButton">
            <el-button :disabled="disabledButton" @click="ossUpload" size="small" type="primary">点击上传</el-button>
        </slot>
    </el-upload>
</template>
<script>
 export default {
   methods: {
    ossUpload(file, ossToken) {
      this.$http.post(ossToken.host, formData, {
         'Content-Type': 'multipart/form-data'
       }).then(res => {
          if(res.status===200){
              this.$message({
              type: "success",
              message: "操作成功!"
             });
          }else {
             this.$message({
                type: "error",
                message: "操作失败!"
             });
          }
          this.$emit('showInsurInformation')//添加素材管理监听事件
          return this.handleSuccess(res);

      })
     }
   }
 }
</script>

  取景使用,我也是查看别人代码对应自己业务需求来使用的。。。。切记取景使用。

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页