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