一，View中引用自定义Dialog组件

需求： 在项目中，有时候可能在不同画面需要完成同一功能，比如示例文件列表查看功能，系统上传文件，需要查看文件列表，以及文件历史记录

话不多说，上图

这个查看文件的Dialog需要在系统中的很多地方调用，开发过程中不可能在每个地方都定义一遍，那么，我们可能使用自定义控件形式，代码如下

<template>
  <el-dialog title="查看文件" :visible.sync="innerVisible" class="form-dialog" center @closed="onClosed">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="文件列表" name="fileList">
        <el-table
          v-loading="listLoading"
          size="small"
          :data="list"
          style="width: 100%"
          element-loading-text="Loading"
          border
          stripe
          fit
          highlight-current-row
        >
          <el-table-column label="序号" align="center">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="文件名" align="center">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column label="文件大小(KB)" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.size }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="downLoadFile(scope.row)">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="历史版本" name="history">
        <el-table
          v-loading="historyListLoading"
          size="small"
          :data="historyList"
          style="width: 100%"
          element-loading-text="Loading"
          border
          stripe
          fit
          highlight-current-row
        >
          <el-table-column label="序号" align="center">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="时间" align="center">
            <template slot-scope="scope">
              {{ scope.row.Date | parseTime('{y}-{m}-{d} {h}:{i}') }}
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.Remark }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" @click="downLoadVersionFile(scope.row)">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="innerVisible = false">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { fileDownload, getFileList, getFileHistoryList, versionFileDownload } from '@/api/common/common'
import { getToken } from '@/utils/auth'
import { parseTime, downloadFile } from '@/utils'
export default {
  name: 'FileListDialog',
  filters: {
    parseTime(time, cFormat) {
      return parseTime(time, cFormat)
    }
  },
  components: {
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    url: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      token: getToken(),
      list: null,
      historyList: null,
      listLoading: true,
      historyListLoading: true,
      innerVisible: this.visible,
      sURL: '',
      activeName: 'fileList'
    }
  },
  watch: {
    visible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.innerVisible = val
    },
    innerVisible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.$emit('update:visible', val)
    },
    sURL(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.activeName = 'fileList'
      // 获取数据
      this.getList()
    }
  },
  mounted() {},
  updated() {
    this.sURL = this.url
    this.dVisible = this.dialogFormVisible
  },
  methods: {
    handleClick(tab, event) {
      switch (tab.name) {
        case 'fileList':
          this.getList()
          break
        case 'history':
          this.getHistory()
          break
      }
    },
    getList() {
      this.listLoading = true
      var param = {
        url: this.sURL,
        token: getToken()
      }
      getFileList(param).then(response => {
        this.list = response.data
        this.listLoading = false
      })
    },
    getHistory() {
      this.historyListLoading = true
      var param = {
        url: this.sURL,
        token: getToken()
      }
      getFileHistoryList(param).then(response => {
        this.historyList = response.data
        this.historyListLoading = false
      })
    },
    onClosed() {
      this.sId = ''
    },
    downLoadFile(row) {
      var param = {
        token: getToken(),
        url: row.url
      }
      fileDownload(param).then(res => {
        if (res.code === 20000) {
          downloadFile(res.data.name, res.data.dataStr)
        }
      })
    },
    downLoadVersionFile(row) {
      var param = {
        token: getToken(),
        url: row.URL,
        versionNo: row.VersionNo
      }
      versionFileDownload(param).then(res => {
        if (res.code === 20000) {
          downloadFile(res.data.name, res.data.dataStr)
        }
      })
    }
  }
}
</script>

<style></style>

　其中，Dialog控制显隐的关键部分是watch函数部分

    visible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.innerVisible = val
    },
    innerVisible(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.$emit('update:visible', val)
    }

　visible和innerVisible分别对应控件的属性以及Data，防止多次修改属性问题。

sURL(val, oldVal) {
      if (val === oldVal) {
        return
      }
      this.activeName = 'fileList'
      // 获取数据
      this.getList()
    }

　该部分是控制Dialog显示数据用

父画面调用：

<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button v-waves size="small" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      size="small"
      :data="list"
      style="width: 100%"
      element-loading-text="Loading"
      border
      stripe
      fit
      highlight-current-row
    >
      <el-table-column label="技术协议" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="viewFile(scope.row)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="total > 0" size="small" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <FileListDialog :url="fileURL" :visible.sync="fileListDialogVisible" />
  </div>
</template>

<script>
import FileListDialog from './dialog/fileListDialog.vue'

export default {
  components: {
    FileListDialog
  },
  data() {
    return {
      fileURL: '',
      fileListDialogVisible: false
    }
  },
  methods: {
    viewFile(row, type) {
      if (stringIsNullOrEmpty(row.Path)) return
      this.fileListDialogVisible = true
      this.fileURL = row.Path // URL地址
  }
 }
}
</script>