javascript - 如何使用 Vue 类组件访问 VueJS 3 和 Typescript 中的 HTML 引用？

Question

我正在努力解决以下问题:我使用 Vue 3 和 Typescript 使用以下代码创建了一个 QRCode 组件:

<template>
  <canvas ref="qrcodeVue"> </canvas>
</template>

<script lang="ts">
import QRCode from "qrcode";
import { Vue, Options } from "vue-class-component";
import { ref } from "vue";

@Options({
  props: {
    value: {
      type: String,
      required: true
    },
    size: {
      type: [Number, String],
      validator: (s: [number | string]) => isNaN(Number(s)) !== true
    },
    level: {
      type: String,
      validator: (l: string) => ["L", "Q", "M", "H"].indexOf(l) > -1
    },
    background: String,
    foreground: String
  }
})
export default class QRCodeVue extends Vue {
  value = "";
  size: number | string = 100;
  level: "L" | "Q" | "M" | "H" = "L";
  background = "#ffffff";
  foreground = "#0000ff";

  mounted() {
    const _size = Number(this.size);
    const scale = window.devicePixelRatio || 1;
    const qrcodeVue = ref<HTMLCanvasElement | null>(null);

    QRCode.toCanvas(qrcodeVue, this.value, {
      scale: scale,
      width: _size,
      color: { dark: this.foreground, light: this.background },
      errorCorrectionLevel: this.level
    });
  }
}
</script>

但是 qrcodeVue总是指什么，我永远无法访问 Canvas 本身。我错过了什么？我应该把这个放在哪里 ref()代码？我也试过 defineComponent结果相同。感谢您提供任何线索。
(顺便说一句，我也尝试使用 npm qrcode-vue 包，但它似乎不支持 Vue 3)

Answer 1

您必须声明引用 qrcodeVue首先作为类属性，而不是在 mounted 内部.
只有这样，它才可用并使用 mounted 中的 ref 元素填充。 :

export default class QRCodeVue extends Vue {
  qrcodeVue = ref<HTMLCanvasElement | null>(null); // not inside mounted

  mounted() {
    console.log(this.qrcodeVue);  // now it's available
  }
}

这相当于下面的 Vue 3 setup句法:

setup() {
  const qrcodeVue = ref(null);
  onMounted(() => {
    console.log(qrcodeVue.value);
  })
  return {
    qrcodeVue
  }
}