【问题总结（4）】7.8vue前端传参 url传参拼接 v-bind绑定 父子传值

展示pdfJs

起服务
在.env.development.local文件里 把localhost替换为本地的 192.168.0.111 这里是生产环境
而不是在.env.development 这里是上线环境

登陆界面 chrome network 显示token有问题
在identity文件起 mt-token （除ui之外，起服务都是npm run dev
若报错，npm i
再 npm run dev

后面起pdfJs 直接在docker里起

1.前端传参
父组件向子组件传参

父组件
v-bind绑定子组件里的属性
data保存在compute计算属性里
下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
 <a-row type="flex" :gutter="24" class="full-height">                                                                 HTML
    <a-col :span="12" class="full-height">
      <PdfJsViewer :fileHandle="rawFileHandler"/>
    </a-col>
    <a-col :span="12" class="full-height">
      <PdfJsViewer :fileHandle="compareFileHandler"/>
    </a-col>
  </a-row>

import PdfJsViewer from '@/components/FileViewer/PdfJsViewer'                                                        JS
  name: 'ApprovalCompareFile',
  components: {
    PdfJsViewer
  },
  props: {
    nanoId: {
      type: String,
      required: true
    }
  },
  computed: {  //父组件向子组件传数据
    subTask () {
      return this.$store.state.subTask.subTask
    },
    rawFileHandler () {
      return { url: `${config.pdfJsBasePath}${this.subTask.rawNanoId}` } //url拼接
    },
    compareFileHandler () {
      return { url: `${config.pdfJsBasePath}${this.subTask.compareNanoId}` }
    }
  },
  created () {
    this.loadData()
  },
  methods: {
    async loadData () {
      try {
        this.spinning = true
        const options = { nanoId: this.nanoId }
        await this.$store.dispatch('subTask/getSubTask', options) //拿到subTask方法接口
      } catch (error) {
        this.$message.error(error.message)
      } finally {
        this.spinning = false
      }
    }
  }
}

// 子组件
props
下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
<template>
  <iframe height="100%" width="100%" :src="pdfUrl" ></iframe>
</template>

<script>
import qs from 'qs'
import config from '@/config/api.config'
/**
 * 组件名称： pdfjs
 * 功能： pdf 的预览，搜索，放大瘦小，下载，旋转等
 * 使用： 调用组件的时候，请传入 pdf 的 Blob 数据
 * 大小： 想要调整 pdf 的宽度和高度，可以在外层调用组件的时候改变组件的size
 */
export default {
  name: 'PdfJsViewer',
  props: {           //子组件接收父组件传的值
    fileHandle: {
      type: Object,   
      required: true
    }
  },
  computed: {
    pdfUrl () {
      const pdfQueryString = qs.stringify({ file: this.fileHandle.url })
      return `${config.pdfJsViewer}/web/viewer.html?${pdfQueryString}`
    }
  }
}
</script>