<NuxtIsland>
Nuxt 提供了 <NuxtIsland> 组件,用于渲染无需客户端 JavaScript 的非交互式组件。
当渲染一个岛屿组件时,岛屿组件的内容是静态的,因此客户端不会下载任何 JavaScript。
更改岛屿组件的属性会触发重新获取岛屿组件以再次渲染。
应用的全局样式会随响应一起发送。
仅服务器组件在底层使用了
<NuxtIsland>
。属性
name
:要渲染的组件名称。- 类型:
string
- 必需
- 类型:
lazy
:使组件非阻塞。- 类型:
boolean
- 默认值:
false
- 类型:
props
:发送给要渲染的组件的属性。- 类型:
Record<string, any>
- 类型:
source
:调用岛屿进行渲染的远程源。- 类型:
string
- 类型:
dangerouslyLoadClientComponents
:从远程源加载组件时需要。- 类型:
boolean
- 默认值:
false
- 类型:
远程岛屿需要在
nuxt.config
中将 experimental.componentIslands
设置为 'local+remote'
。
强烈不建议启用 dangerouslyLoadClientComponents
,因为您无法信任远程服务器的 JavaScript。默认情况下,岛屿组件会从
~/components/islands/
目录扫描。因此,~/components/islands/MyIsland.vue
组件可以通过 <NuxtIsland name="MyIsland" />
渲染。插槽
如果声明了插槽,可以将插槽传递给岛屿组件。
每个插槽都是交互式的,因为它们由父组件提供。
某些插槽为 NuxtIsland
保留用于特殊情况。
#fallback
:指定在岛屿加载之前(如果组件是延迟加载的)或NuxtIsland
无法获取组件时渲染的内容。
引用
refresh()
- 类型:
() => Promise<void>
- 描述:通过重新获取强制刷新服务器组件。
- 类型:
事件
error
- 参数:
- error:
- 类型:
unknown
- 类型:
- error:
- 描述:当
NuxtIsland
无法获取新的岛屿组件时触发。
- 参数: