<NuxtIsland>

源文件
Nuxt 提供了 <NuxtIsland> 组件，用于渲染非交互式组件，且不会下载任何客户端 JS。

当渲染 Island 组件时，组件的内容是静态的，因此客户端不会下载任何 JS。

更改 Island 组件的 props 会触发对该组件的重新获取，从而进行二次渲染。

应用的全局样式会随响应一同发送。
仅服务端组件（Server only components）底层使用的是 <NuxtIsland>。

属性

  • name : 要渲染的组件名称。
    • 类型：string
    • 必填
  • lazy: 使组件变为非阻塞。
    • 类型: boolean
    • 默认值: false
  • props: 传递给组件以进行渲染的 Props。
  • 类型: Record<string, any>
  • source: 用于渲染 Island 的远程来源。
  • 类型：string
  • dangerouslyLoadClientComponents: 从远程来源加载客户端组件所必需的。
  • 类型: boolean
  • 默认值: false
    • 远程 Island 需要在 nuxt.config 中将 experimental.componentIslands 设置为 'local+remote'。
    使用 source prop 从远程服务器渲染内容本质上是危险的。当你指定远程 source 时，你完全信任该服务器提供将在你的应用中直接渲染的安全 HTML 内容。这类似于在外部内容上使用 v-html —— 远程服务器可以注入任何 HTML，包括潜在的恶意内容。仅在你完全信任并控制的服务器上使用 source。dangerouslyLoadClientComponents prop 控制了额外的风险层：是否也要从远程来源下载并执行客户端组件。即使禁用了 dangerouslyLoadClientComponents（默认情况），你仍然是在信任远程服务器的 HTML 输出。
    默认情况下，Island 组件会从 ~/components/islands/ 目录扫描。因此，~/components/islands/MyIsland.vue 组件可以通过 <NuxtIsland name="MyIsland" /> 进行渲染。

    插槽

    如果声明了插槽，可以将插槽传递给 Island 组件。

    每个插槽都是交互式的，因为父组件是提供插槽的一方。

    某些插槽是 NuxtIsland 为特殊情况保留的。

    • #fallback: 指定在 Island 加载之前（如果组件是懒加载的）或者如果 NuxtIsland 获取组件失败时要渲染的内容。

    Ref

    • refresh()
      • 类型: () => Promise<void>
      • 描述: 通过重新获取服务端组件来强制刷新它。

    事件

    • error
      • 参数:
        • error:
          • 类型: unknown
      • 描述: 当 NuxtIsland 获取新 Island 失败时触发。