vue3 利用qrcode和ref生成二维码

在 Vue3 中利用 qrcode 和 ref 动态生成二维码，你可以按照以下步骤操作：

1. 首先，在你的项目中安装 `vue-qrcode-generator` 库作为 QRCode 的生成工具。可以使用npm或yarn进行安装：

   npm install vue-qrcode-generator
   # 或者
   yarn add vue-qrcode-generator

2. 引入并创建一个 ref 来存储你要生成二维码的数据。例如，你可以创建一个字符串类型的 ref：

   import { ref } from 'vue';
   
   const qrData = ref('');

3. 使用 `QrCode` 组件，这个组件通常来自 `vue-qrcode-generator`，并将你的数据绑定到 `src` 属性上：

   <template>
     <div>
       <qrcode :value="qrData.value" />
     </div>
   </template>

   <script>
   // ...
   export default {
     data() {
       return {
         qrData,
       };
     },
   };
   </script>

4. 当需要更新二维码内容时，通过修改 `qrData` 的值即可。比如，如果你有一个输入框让用户输入信息：

   <input v-model="qrData" placeholder="请输入内容..." />

5. 如果你希望在按钮点击事件中生成二维码，可以在按钮的 `@click` 事件处理器中触发内容更新：

   <button @click="generateQR">生成二维码</button>

   methods: {
     generateQR() {
       // 按照需要处理用户输入的内容
       this.qrData.value = encodeURIComponent('用户输入的数据');
     },
   }