Nuxt3 中文课程《实战全栈开发简书》限时优惠

<NuxtClientFallback>

Nuxt提供了`<NuxtClientFallback>`组件,用于在客户端渲染其内容,如果其任何子组件在SSR中触发错误。

Nuxt提供了<NuxtClientFallback>组件,用于在客户端渲染其内容,如果其任何子组件在SSR中触发错误。

这个组件是实验性的,为了使用它,你必须在你的nuxt.config中启用experimental.clientFallback选项。

事件

  • @ssr-error: 当子组件在SSR中触发错误时,触发的事件。请注意,这只会在服务器端触发。
    <template>
      <NuxtClientFallback @ssr-error="logSomeError">
        <!-- ... -->
      </NuxtClientFallback>
    </template>
    

属性

  • placeholderTag | fallbackTag: 指定一个后备标签,在插槽无法渲染时将其渲染。
    • 类型: string
    • 默认值: div
  • placeholder | fallback: 指定后备内容,在插槽无法渲染时将其渲染。
    • 类型: string
  • keepFallback: 如果后备内容在服务器端无法渲染,是否保留后备内容。
    • 类型: boolean
    • 默认值: false
  <template>
    <!-- 如果默认插槽无法渲染,在服务器端渲染<span>Hello world</span> -->
    <NuxtClientFallback fallback-tag="span" fallback="Hello world">
      <BrokeInSsr />
    </NuxtClientFallback>
  </template>

插槽

  • #fallback: 如果插槽无法渲染,在服务器端指定要显示的内容。
<template>
  <NuxtClientFallback>
    <!-- ... -->
    <template #fallback>
      <!-- 如果默认插槽在SSR中无法渲染,将在服务器端渲染这段内容 -->
      <p>Hello world</p>
    </template>
  </NuxtClientFallback>
</template>