QRCode组件在Vue里渲染不出来是怎么回事？

博主建梗提问于 2026-03-25 06:24:23 阅读 3

组件

我在用Vue3写一个页面，引入了qrcode.vue组件，但页面上死活不显示二维码，控制台也没报错。

我试过传字符串进去，也检查了div容器有没有宽高，还是空白。代码大概是这样：

<template>
  <div style="width: 200px; height: 200px;">
    <QRCode :text="'https://example.com'" />
  </div>
</template>

是不是漏了什么初始化步骤？或者这个组件根本不支持Vue3？

特殊组件

我来解答赞 4 收藏

反馈

1 条解答

シ江梅 Lv1

首先，确保你安装的 qrcode.vue 组件确实是支持 Vue3 的版本。有时候组件库的更新可能跟不上框架的变化，所以最好查一下官方文档确认一下兼容性。

其次，检查一下你在项目中是否正确引入了 QRCode 组件。通常需要在 script 部分 import 并注册组件，类似这样：
pre class="pure-highlightjs line-numbers">

import { defineComponent } from 'vue';

import QRCode from 'qrcode.vue';



export default defineComponent({

  components: {

    QRCode,

  },

});

然后，虽然你在 div 容器里设置了宽度和高度，但 QRCode 组件可能有自己的默认样式或者需要明确的尺寸设置才能显示出来。尝试给 QRCode 组件本身也设置宽度和高度，或者使用 CSS 类来指定：

最后，注意安全。确保生成的二维码内容来源可靠，避免将用户输入未经处理的内容直接生成二维码，防止潜在的安全风险，比如钓鱼攻击。

希望这些步骤能帮助你解决问题。如果还有问题，可以检查一下浏览器的开发者工具，看网络请求和元素面板，有时候会有线索提示是什么地方出了问题。

2026-03-25 07:01