在Svelte中學習如何使用道具,並使具有父/子關係的兩個組件相互交流
您可以使用以下語法將Svelte組件導入任何其他組件中:import ComponentName from 'componentPath'
:
<script>
import SignupForm from './SignupForm.svelte';
</script>
該路徑是相對於當前組件路徑的。
./
表示“同一文件夾”。你會用../
返回一個文件夾,依此類推。
完成後,您可以在標記中使用新導入的組件,例如HTML標籤:
<SignupForm />
通過這種方式,您將在兩個組件之間形成父/子關係:一個是導入的組件,另一個是導入的組件。
通常,您希望讓父組件將數據傳遞給子組件。
您可以使用道具。道具的行為類似於純HTML中的屬性,並且是一種單向通信形式。
在此示例中,我們通過了disabled
道具,傳遞JavaScript值true
對此:
<SignupForm disabled={true}/>
在SignupForm組件中,您需要出口這disabled
道具,以這種方式:
<script>
export let disabled
</script>
這是您表達道具暴露於父部件的事實的方式。
使用組件時,可以傳遞變量而不是值來動態更改它:
<script>
import SignupForm from './SignupForm.svelte';
let disabled = true
</script>
<SignupForm disabled={disabled}/>
當。。。的時候disabled
變量值更改後,子組件將使用新的prop值進行更新。例子:
<script>
import SignupForm from './SignupForm.svelte';
let disabled = true
setTimeout(() => { disabled = false }, 2000)
</script>
<SignupForm disabled={disabled}/>
免費下載我的苗條手冊
更多精妙的教程:
- Svelte入門-簡短教程
- 如何在斯維爾特使用道具
- 如何在Svelte中導入組件
- 如何從Svelte組件導出函數和變量
- 苗條的模板:條件邏輯
- 如何按需重新渲染Svelte組件
- 苗條的插槽
- 如何在Svelte模板中添加評論
- 苗條的綁定
- 在Svelte中處理狀態更新
- Svelte中的反應性陳述
- 苗條的生命週期事件
- 苗條的模板:循環
- 解決Svelte模板中的承諾
- 處理斯維爾特的活動
- 斯維爾特的跨組件狀態管理
- 如何在腳本模塊外部的Sapper中訪問URL參數
- 如何在Svelte中動態應用CSS
- 如何在Sapper中重定向到URL
- 如何在Svelte模板中模擬for循環