如何在斯維爾特使用道具

在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中學習如何使用道具，並使具有父/子關係的兩個組件相互交流

更多精妙的教程：