<NuxtIsland>
Nuxt 提供了 <NuxtIsland> 组件,以便在没有任何客户端 JS 的情况下渲染非交互式组件。
渲染岛屿组件时,岛屿组件的内容是静态的,因此不会下载客户端 JS。
更改岛屿组件的 props 会触发该岛屿组件的重新获取,重新渲染。
应用程序的全局样式伴随响应发送。
服务器仅组件在内部使用
<NuxtIsland>
。Props
name
: 要渲染的组件名称。- type:
string
- required
- type:
lazy
: 使组件非阻塞。- type:
boolean
- default:
false
- type:
props
: 要发送给要渲染的组件的 props。- type:
Record<string, any>
- type:
source
: 调用岛屿以渲染的远程源。- type:
string
- type:
- dangerouslyLoadClientComponents: 从远程源加载组件所需。
- type:
boolean
- default:
false
- type:
远程岛屿需要在你的
nuxt.config
中将 experimental.componentIslands
设置为 'local+remote'
。
强烈不建议启用 dangerouslyLoadClientComponents
,因为你不能信任远程服务器的 JavaScript。默认情况下,组件岛屿会从
~/components/islands/
目录扫描。因此 ~/components/islands/MyIsland.vue
组件可以使用 <NuxtIsland name="MyIsland" />
渲染。Slots
如果声明,可以将插槽传递给岛屿组件。
每个插槽都是交互式的,因为父组件提供了它。
一些插槽保留给 NuxtIsland
用于特殊情况。
#fallback
: 指定在岛屿加载之前(如果组件是懒加载)或NuxtIsland
无法获取组件时要渲染的内容。
Ref
refresh()
- type:
() => Promise<void>
- description: 通过重新获取服务器组件强制刷新。
- type:
Events
error
- parameters:
- error:
- type:
unknown
- type:
- error:
- description: 当
NuxtIsland
无法获取新岛屿时发出。
- parameters: