本章介绍vue-cli框架的组件实际应用，以上传Excel导入数据作为一个独立弹框组件封装为例

1.组件内部

1.1 写法

写法和普通的模块页面一样

<template>
  <el-dialog title="上传文件" :close-on-click-modal="false" @close="closeHandle" :visible.sync="visible">
    <el-upload drag :action="url" :before-upload="beforeUploadHandle" :on-success="successHandle" multiple
      :file-list="fileList" style="text-align: center;">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div class="el-upload__tip" slot="tip">只支持EXCEL文件！</div>
    </el-upload>
  </el-dialog>
</template>

    // 初始化
    init (id) {
      this.url = this.$http.adornUrl(`/expense/uploadExpenseDetails/${id}?token=${this.$cookie.get('token')}`)
      this.visible = true
    },

1.2 组件显示控制

作为弹框组件来使用，所有要控制组件的显示，内部定义变量。

<el-dialog title="上传文件" :close-on-click-modal="false" @close="closeHandle" :visible.sync="visible">
  data () {
    return {
      // 窗口显示
      visible: false,
      // 上传的文件数据
      fileList: []
    }
  }

在内部操作控制显示当前组件。上传成功后如不继续操作，可以关闭显示组件；

    // 上传成功
    successHandle (response, file, fileList) {
      this.fileList = fileList
      this.successNum++
      if (response && response.code === 0) {
        if (this.num === this.successNum) {
          this.$confirm('操作成功, 是否继续操作?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(() => {
            this.visible = false
          })
        }
      } else {
        if (response && response.code === -1) {
          this.$alert(response.msg, '提示', {})
        } else {
          this.$message.error(response.msg)
        }
      }
    },

弹框右上角关闭按钮事件，调用父组件的事件refreshDataList。

    // 弹窗关闭时
    closeHandle () {
      this.fileList = []
      this.$emit('refreshDataList')
    }

2.外部调用

2.1 引入组件

<script>
//引入
import UploadExpenseDetails from './ExpenseDetailsUpload'
export default {
  return {
     // 上传窗口
    uploadVisible: false,
  },
  //声明引入的组件
  components: {
    UploadExpenseDetails
  }
}
</script>

2.2 使用组件

声明组件ref，方便后面JS操作。自定义事件refreshDataList，以便在组件内部调用外部的方法。

<uploadExpenseDetails v-if="uploadVisible" ref="UploadExpenseDetails" @refreshDataList="getExpensesDetails">
</uploadExpenseDetails>

2.3 操作组件

打开上传对话框

    // 上传文件
    uploadExpenseDetail (id) {
      this.uploadVisible = true
      this.$nextTick(() => {
        this.$refs.UploadExpenseDetails.init(id)
      })
    }