如何将Vue组件Prop作为vue-recaptcha的site-key使用？

问题说明 #

我有一个Vue表单组件，原本通过硬编码siteKey的方式使用vue-recaptcha-v3，代码可以正常运行。但现在希望将siteKey作为组件Prop传入，替代硬编码的方式。尝试直接在Vue.use中使用this.siteKey时，发现this.siteKey是undefined，代码无法运行。想知道有没有办法将Prop中的siteKey配置给vue-recaptcha-v3，比如在组件生命周期钩子中动态初始化插件？

原可运行代码（硬编码siteKey） #

<template>
  <!-- 包含表单和触发onSubmit的按钮 -->
</template>

<script>
import { VueReCaptcha } from 'vue-recaptcha-v3';

Vue.use(VueReCaptcha, {
  siteKey: "hard-coded site-key here",
  loaderOptions: {
    useRecaptchaNet: true,
  },
});

export default {
  methods: {
    async onSubmit(e) {
      // 使用reCAPTCHA并处理错误/成功逻辑
    },
  },
};
</script>

尝试的错误代码（通过Prop传递siteKey） #

<script>
import { VueReCaptcha } from 'vue-recaptcha-v3';

Vue.use(VueReCaptcha, {
  siteKey: this.siteKey, // this此时未指向组件实例，siteKey为undefined
  loaderOptions: {
    useRecaptchaNet: true,
  },
});

export default {
  props: {
    siteKey: String,
  },
  // ...其他代码
};
</script>

解决方案 #

问题出在Vue.use是在组件实例创建前执行的，此时this并不指向组件实例，自然无法获取到Prop中的siteKey。我们可以使用vue-recaptcha-v3提供的动态加载方法，在组件生命周期钩子中初始化插件，此时Prop已经可用。

Vue 2 写法 #

<template>
  <form @submit.prevent="onSubmit">
    <!-- 表单字段 -->
    <button type="submit">提交</button>
  </form>
</template>

<script>
import { loadReCaptcha } from 'vue-recaptcha-v3';

export default {
  props: {
    siteKey: {
      type: String,
      required: true // 强制传入siteKey，避免空值
    }
  },
  async mounted() {
    // 在mounted钩子中动态加载reCAPTCHA，使用Prop传入的siteKey
    await loadReCaptcha(this.siteKey, {
      useRecaptchaNet: true
    });
  },
  methods: {
    async onSubmit() {
      try {
        // 调用reCAPTCHA获取验证token，传入动作名称（如'submit'）
        const token = await this.$recaptcha('submit');
        // 拿到token后，和表单数据一起提交到后端
        console.log('reCAPTCHA验证token:', token);
        // 此处添加表单提交逻辑
      } catch (error) {
        console.error('reCAPTCHA验证失败:', error);
      }
    }
  }
};
</script>

Vue 3 组合式API写法 #

<template>
  <form @submit.prevent="onSubmit">
    <!-- 表单字段 -->
    <button type="submit">提交</button>
  </form>
</template>

<script setup>
import { loadReCaptcha, useReCaptcha } from 'vue-recaptcha-v3';
import { onMounted } from 'vue';

// 定义组件Prop
const props = defineProps({
  siteKey: {
    type: String,
    required: true
  }
});

// 获取reCAPTCHA实例
const { recaptcha } = useReCaptcha();

// 在组件挂载后加载reCAPTCHA
onMounted(async () => {
  await loadReCaptcha(props.siteKey, {
    useRecaptchaNet: true
  });
});

// 表单提交方法
const onSubmit = async () => {
  try {
    const token = await recaptcha('submit');
    console.log('reCAPTCHA验证token:', token);
    // 此处添加表单提交逻辑
  } catch (error) {
    console.error('reCAPTCHA验证失败:', error);
  }
};
</script>

关键说明 #

• 移除全局的Vue.use(VueReCaptcha)，改用loadReCaptcha动态加载，这样就能在组件内部获取到Prop中的siteKey
• 选择在mounted钩子中执行加载，此时组件的Prop已经完成初始化，siteKey可以正常获取
• 验证时通过this.$recaptcha（Vue2）或recaptcha（Vue3）方法获取token，后续即可将token和表单数据一起提交到后端进行验证

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