如何在斯維爾特使用道具

在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}/>

免費下載我的苗條手冊


更多精妙的教程: