当渲染一个岛屿组件时,该岛屿组件的内容是静态的,因此不会在客户端下载任何 JS。
更改岛屿组件的 props 会触发重新获取岛屿组件以重新渲染。
<NuxtIsland>。name :要渲染的组件名称。
stringlazy:使组件非阻塞加载。
booleanfalseprops:传递给渲染组件的属性。
Record<string, any>source:调用远程资源以渲染该岛屿。
stringbooleanfalsenuxt.config 中将 experimental.componentIslands 设置为 'local+remote'。
强烈不建议启用 dangerouslyLoadClientComponents,因为无法信任远程服务器的 JavaScript。~/components/islands/ 目录扫描。
因此,~/components/islands/MyIsland.vue 组件可以通过 <NuxtIsland name="MyIsland" /> 渲染。如果声明了插槽,可以向岛屿组件传递插槽。
每个插槽都是交互式的,因为提供插槽的是父组件。
某些插槽为 NuxtIsland 保留,用于特殊情况。
#fallback:指定岛屿加载前(如果组件为懒加载)或 NuxtIsland 获取组件失败时显示的内容。refresh()() => Promise<void>errorunknownNuxtIsland 获取新岛屿失败时触发。