Vue3 setup脚本中使用第三方ReCaptcha组件ref未定义问题求助

你遇到的'mrecaptcha' is not defined报错，核心原因是Vue3中模板里绑定的ref必须在脚本中显式声明，哪怕是第三方组件的ref也不例外。下面是具体解决步骤：

1. 在脚本中创建对应ref #

不管用<script setup>还是选项式API，都需要手动声明与模板中ref="mrecaptcha"同名的ref变量：

用<script setup>（推荐） #

<script setup>
import { ref } from 'vue'
import Recaptcha from '@appsbd/vue3-recaptcha'

// 必须显式创建ref，名称和模板里的ref属性完全一致
const mrecaptcha = ref(null)
const siteKey = ref('你的Google ReCaptcha站点密钥')
const isClient = ref(true)

// 提交表单时获取令牌
const submitForm = async () => {
  // 先判断组件是否已挂载（因为用了v-if）
  if (!mrecaptcha.value) return

  try {
    // 调用组件的execute方法获取令牌
    const token = await mrecaptcha.value.execute()
    // 这里写你的表单提交逻辑，把token一起传给后端
    console.log('ReCaptcha令牌：', token)
  } catch (err) {
    console.error('获取令牌失败：', err)
  }
}
</script>

<template>
  <form @submit.prevent="submitForm">
    <recaptcha v-if="isClient" ref="mrecaptcha" :site-key="siteKey" />
    <button type="submit">提交</button>
  </form>
</template>

用选项式API #

<script>
import Recaptcha from '@appsbd/vue3-recaptcha'

export default {
  components: { Recaptcha },
  data() {
    return {
      siteKey: '你的Google ReCaptcha站点密钥',
      isClient: true
    }
  },
  methods: {
    async submitForm() {
      // 选项式API中通过this.$refs访问ref
      const recaptchaInstance = this.$refs.mrecaptcha
      if (!recaptchaInstance) return

      try {
        const token = await recaptchaInstance.execute()
        console.log('ReCaptcha令牌：', token)
      } catch (err) {
        console.error('获取令牌失败：', err)
      }
    }
  }
}
</script>

<template>
  <form @submit.prevent="submitForm">
    <recaptcha v-if="isClient" ref="mrecaptcha" :site-key="siteKey" />
    <button type="submit">提交</button>
  </form>
</template>

2. 关键注意点 #

• 因为你用了v-if="isClient"，必须确保调用execute()时组件已经渲染完成（也就是isClient为true），否则mrecaptcha.value会是null
• 确认已正确安装包：执行npm install @appsbd/vue3-recaptcha
• 站点密钥要从Google ReCaptcha控制台获取，确保是针对Vue项目配置的正确密钥

内容的提问来源于stack exchange，提问作者albert