<NuxtIsland>
Nuxt 提供了 <NuxtIsland> 组件,用于在不使用任何客户端 JS 的情况下渲染非交互式组件。
渲染孤岛组件时,孤岛组件的内容是静态的,因此客户端不会下载任何 JS。
¥When rendering an island component, the content of the island component is static, thus no JS is downloaded client-side.
更改 island 组件的 props 会触发对 island 组件的重新获取,从而再次渲染它。
¥Changing the island component props triggers a refetch of the island component to re-render it again.
全局用法可以在浏览器端使用,但不能在服务器端使用,以避免用户之间共享上下文。
仅服务器组件在后台使用 
<NuxtIsland>Props
name:要渲染的组件名称。- 类型:
string - required
 
- 类型:
 lazy:使组件非阻塞。- 类型:
boolean - 默认:
false 
- 类型:
 props:发送给组件进行渲染的 Props。- 类型:
Record<string, any> 
- 类型:
 source:调用岛屿进行渲染的远程源。- 类型:
string 
- 类型:
 - dangerouslyLoadClientComponents:需要从远程源加载组件。
- 类型:
boolean - 默认:
false 
 - 类型:
 
远程岛屿需要将 
experimental.componentIslands 设置为 nuxt.config 中的 'local+remote'。强烈建议不要启用 dangerouslyLoadClientComponents,因为你无法信任远程服务器的 JavaScript。默认情况下,组件岛是从 
~/components/islands/ 目录扫描的。因此,~/components/islands/MyIsland.vue 组件可以使用 <NuxtIsland name="MyIsland" /> 进行渲染。插槽
¥Slots
如果声明了插槽,则可以将其传递给孤岛组件。
¥Slots can be passed to an island component if declared.
每个插槽都是可交互的,因为父组件是提供它的组件。
¥Every slot is interactive since the parent component is the one providing it.
某些插槽保留给 NuxtIsland 用于特殊情况。
¥Some slots are reserved to NuxtIsland for special cases.
#fallback:指定在岛加载之前(如果组件是延迟加载的)或NuxtIsland无法获取组件时要渲染的内容。
Ref
refresh()- 类型:
() => Promise<void> - 说明:通过重新获取服务器组件来强制重新获取它。
 
- 类型:
 
事件
¥Events
error- 参数:
- 错误:
- 类型:
unknown 
 - 类型:
 
 - 错误:
 - 说明:当 
NuxtIsland无法获取新岛时发出。 
- 参数: