<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
无法获取新岛时发出。
- 参数: