<NuxtErrorBoundary>
<NuxtErrorBoundary> 组件处理默认插槽中发生的客户端错误。
<NuxtErrorBoundary>
在内部使用了 Vue 的 onErrorCaptured
钩子。事件
@error
: 当组件的默认插槽抛出错误时发出的事件。<template> <NuxtErrorBoundary @error="logSomeError"> <!-- ... --> </NuxtErrorBoundary> </template>
插槽
#error
: 指定在发生错误时显示的后备内容。<template> <NuxtErrorBoundary> <!-- ... --> <template #error="{ error, clearError }"> <p>An error occurred: {{ error }}</p> <button @click="clearError">Clear error</button> </template> </NuxtErrorBoundary> </template>
Examples
error
and clearError
in script Accessing
You can access error
and clearError
properties within the component's script as below:
<template>
<NuxtErrorBoundary ref="errorBoundary">
<!-- ... -->
</NuxtErrorBoundary>
</template>
<script setup lang="ts">
const errorBoundary = useTemplateRef('errorBoundary')
// errorBoundary.value?.error
// errorBoundary.value?.clearError()
</script>