概述
本节为 Turnstile 组件通过 defineExpose 暴露实例方法，使用户可以通过 ref 访问 Turnstile 实例、获取验证 token、重置验证、销毁组件等。核心知识点包括 defineExpose 的使用、Turnstile API 的封装，以及 widget ID 的管理。
技术要点
1. 需要暴露的方法
| 方法 | 功能 | 对应 Turnstile API |
|---|---|---|
turnstile | 获取 DOM 实例 | -- |
getResponse | 获取验证 token | turnstile.getResponse() |
reset | 重置验证 | turnstile.reset() |
destroy | 销毁组件 | 手动移除 DOM |
2. Widget ID 管理
Turnstile 初始化后返回 widget ID，后续操作（reset、getResponse）都需要此 ID：
const widgetId = ref<string>('')
// render 成功后保存 ID
onMounted(() => {
widgetId.value = window.turnstile.render('#turnstile-container', {
sitekey: props.siteKey,
callback: (token: string) => emit('callback', token),
})
})
typescript
3. defineExpose 暴露方法
defineExpose({
// 获取 DOM 实例
turnstile: () => document.getElementById('turnstile-container'),
// 获取验证响应数据
getResponse: () => {
return window.turnstile.getResponse(widgetId.value)
},
// 重置验证（重新发起挑战）
reset: () => {
if (widgetId.value) {
window.turnstile.reset(widgetId.value)
}
},
})
typescript
4. destroy 销毁方法
function destroy() {
const dom = document.getElementById('turnstile-container')
if (dom) {
window.turnstile.remove(widgetId.value)
dom.innerHTML = ''
}
}
typescript
5. 使用示例
<template>
<Turnstile
ref="turnstileRef"
site-key="your-site-key"
@callback="handleCallback"
/>
<button @click="handleTest">Test</button>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import Turnstile from './Turnstile.vue'
const turnstileRef = ref()
function handleTest() {
console.log(turnstileRef.value)
// 获取验证 token
const token = turnstileRef.value.getResponse()
console.log('Token:', token)
// 重置验证
turnstileRef.value.reset()
}
function handleCallback(token: string) {
console.log('验证成功:', token)
}
</script>
vue
扩展内容
defineExpose 使用注意事项
// defineExpose 仅在 <script setup> 中有效
// 暴露的方法在 template ref 中通过 .value 访问
defineExpose({
turnstile,
getResponse,
reset,
destroy,
})
typescript
完整方法清单
通过 ref 访问组件后，控制台打印可看到暴露的方法：
{
turnstile: HTMLDivElement, // DOM 实例
getResponse: Function, // 获取 token
reset: Function, // 重置验证
destroy: Function, // 销毁组件
}
javascript
总结
通过 defineExpose 将 Turnstile 的核心操作（getResponse、reset、destroy）暴露给父组件，使用户可以通过 template ref 访问组件实例并调用方法。widget ID 是关键的状态标识，在 render 成功后保存，后续所有 API 调用都依赖此 ID。
↑