<NuxtIsland>
Nuxt提供了`<NuxtIsland>`组件,用于渲染一个没有任何客户端JS的非交互式组件
渲染一个岛屿组件时,岛屿组件的内容是静态的,因此不会在客户端下载任何JS。
更改岛屿组件的属性会触发重新获取岛屿组件并重新渲染。
您的应用程序的全局样式会随响应一起发送。
仅服务器端组件在底层使用
<NuxtIsland>
属性
name
:要渲染的组件的名称。- 类型:
string
- 必填
- 类型:
lazy
:使组件非阻塞。- 类型:
boolean
- 默认值:
false
- 类型:
props
:要发送给组件以进行渲染的属性。- 类型:
Record<string, any>
- 类型:
source
:要调用岛屿以进行渲染的远程源。- 类型:
string
- 类型:
远程岛屿需要在您的
nuxt.config
中将experimental.componentIslands
设置为'local+remote'
。插槽
如果声明了,可以将插槽传递给岛屿组件。
每个插槽都是交互式的,因为父组件是提供插槽的组件。
某些插槽为NuxtIsland
保留,用于特殊情况。
#fallback
:指定在岛屿加载之前(如果组件是lazy)或者如果NuxtIsland
无法获取组件时要渲染的内容。