<NuxtErrorBoundary>
<NuxtErrorBoundary> 组件处理其默认插槽中发生的客户端错误。
<NuxtErrorBoundary>
在底层使用了 Vue 的 onErrorCaptured
钩子。
事件
-
@error
: 当组件的默认插槽抛出错误时触发的事件。<template> <NuxtErrorBoundary @error="logSomeError"> <!-- ... --> </NuxtErrorBoundary> </template>
插槽
-
#error
: 指定在发生错误时显示的备用内容。<template> <NuxtErrorBoundary> <!-- ... --> <template #error="{ error, clearError }"> <p>发生错误:{{ error }}</p> <button @click="clearError">清除错误</button> </template> </NuxtErrorBoundary> </template>
示例
在脚本中访问 error
和 clearError
您可以在组件的脚本中访问 error
和 clearError
属性,如下所示:
<template>
<NuxtErrorBoundary ref="errorBoundary">
<!-- ... -->
</NuxtErrorBoundary>
</template>
<script setup lang="ts">
const errorBoundary = useTemplateRef('errorBoundary')
// errorBoundary.value?.error
// errorBoundary.value?.clearError()
</script>
※此页面是 Nuxt.js 官方文档的非官方翻译页面。