Nuxt3 中文课程 《实战全栈开发简书》.

<NuxtIsland>

Nuxt提供了`<NuxtIsland>`组件,用于渲染一个没有任何客户端JS的非交互式组件

渲染一个岛屿组件时,岛屿组件的内容是静态的,因此不会在客户端下载任何JS。

更改岛屿组件的属性会触发重新获取岛屿组件并重新渲染。

这个组件是实验性的,为了使用它,你必须在你的nuxt.config中启用experimental.componentIslands选项。
您的应用程序的全局样式会随响应一起发送。
仅服务器端组件在底层使用<NuxtIsland>

属性

  • name:要渲染的组件的名称。
    • 类型string
    • 必填
  • lazy:使组件非阻塞。
    • 类型boolean
    • 默认值false
  • props:要发送给组件以进行渲染的属性。
    • 类型Record<string, any>
  • source:要调用岛屿以进行渲染的远程源。
    • 类型string
远程岛屿需要在您的nuxt.config中将experimental.componentIslands设置为'local+remote'

插槽

如果声明了,可以将插槽传递给岛屿组件。

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

某些插槽为NuxtIsland保留,用于特殊情况。

  • #fallback:指定在岛屿加载之前(如果组件是lazy)或者如果NuxtIsland无法获取组件时要渲染的内容。