qrcode根据本地数据生成二维码第一次显示跨页面后显示异常

最近写二维码的时候，突然想起之前项目遇到过的一个问题，网上也没有这方面解答，想到大家今后可能也会遇到这类问题，在此记录下来，希望对你们有所帮助，大佬们不喜勿喷，qrcode配合画布canvas本地生成二维码的时候第一次能够正常显示，最下方会贴出代码

跨页面后显示异常

刚开始是有些头疼的，因为控制台一切正常，没有抛出错误，然后去看qrcode的参数属性也没有问题，我是多个页面需要生成多个二维码，封装了qrcode组件

F12逐步排查看html结构，生成多个二维码之后并没有销毁

所以第一想到的是可能是覆盖问题，我也不知道为什么关闭窗口后并没有销毁，那么就手动remove()销毁它吧，结果还是悲剧的，依旧没有效果，通过打印结果可以得知二维码是正常生成了的只是没有被渲染上去

难道是跨页面的时候当前页面的id和其他页面的id重复导致qrcode生成二维码成功了但是画布无法正常显示吗，那么只需要每个引用了qrcode组件的页面都传一个唯一的值过来做id就行了，抱着试一试的态度我再次打开了vscode，将父组件的name传了过来

父组件

子组件id

props

之后再获取到nameOn生成二维码，还挺好用

<template>

　　<div>
　　　　　　　　<!-- 单据二维码-->
            <el-table-column :label="$t('receipt.orderQRCode')"
                              header-align="center"
                              align="center"
                              min-width="150">
              <template slot-scope="scope">
                <el-button type="primary" @click="createORCode(scope.row.receiptOrder)">
                  {{$t('receipt.generateQRcode')}}
                </el-button>
              </template>
            </el-table-column>

     　　　　　　 <!-- 生成二维码弹框 -->

      　　　　<q-r-code-dialog v-if="codeDialogVisible"

                       :orderNumber="orderNumber"

                       :nameOn="this.$options.name"

                       ref="codeDialog"

                       @confirm="createORCode">

      　　　　</q-r-code-dialog>

    </div>

</template>

    /**
     * 生成二维码
     */
    createORCode (orderNumber) {
      this.codeDialogVisible = true
      this.orderNumber = orderNumber
      this.$nextTick(() => {
        this.$refs.codeDialog.init()
      })
    },

qrcode公共组件

<template>
  <!-- 二维码 -->
  <el-dialog
    width="400px"
    :title="$t('receipt.viewQRCode')"
    :close-on-click-modal="false"
    :visible.sync="visible"
    @closed="visible = false"
    :append-to-body="true"
  >
    <el-container style="margin-left: 5px">
      <el-header style="height: 15px">
        {{ $t("receipt.documentNo") + "：" + orderNumber }}
      </el-header>
      <el-main>
        <canvas :id="nameOn" class="canvas"></canvas>
      </el-main>
    </el-container>
  </el-dialog>
</template>

<script>
import QRCode from 'qrcode'

export default {
  name: 'QRCode',
  props: {
    orderNumber: {
      type: String,
      default: ''
    },
    nameOn: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      visible: false
    }
  },
  methods: {
    // 初始化
    init () {
      this.visible = true
      this.$nextTick(() => {
        console.log(this.orderNumber, 'orderNumber')
        // console.log(this.nameOn, 'name')
        if (this.orderNumber) {
          // this.viewImgVisible = true
          // 生成二维码
          let opts = {
            errorCorrectionLevel: 'H',
            type: 'image/jpeg',
            rendererOpts: {
              quality: 0.3
            }
          }
          console.log(opts, 'opts')
          let canvasEle = document.querySelector(`#${this.nameOn}`)
          QRCode.toDataURL(canvasEle, this.orderNumber, opts, function (err) {
            if (err) throw err
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.canvas {
  margin-left: 10%;
  width: 80% !important;
  height: 80% !important;
}
</style>