<NuxtIsland>
Nuxt 提供了 <NuxtIsland> 元件來渲染不需任何客戶端 JS 的非互動式元件。
當渲染一個島嶼元件時,島嶼元件的內容是靜態的,因此不會在客戶端下載任何 JS。
更改島嶼元件的 props 會觸發重新獲取島嶼元件以再次重新渲染它。
應用程式的全域樣式會與響應一起發送。
僅伺服器元件在底層使用
<NuxtIsland>
Props
name
:要渲染的元件名稱。- type:
string
- 必填
- 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: