/

如何在Svelte中使用props

如何在Svelte中使用props

學習如何在Svelte中使用props，讓具有父子關係的兩個組件彼此通信。

您可以使用import ComponentName from 'componentPath'的語法將Svelte組件引入到任何其他組件中：

1
2
3
<script>
import SignupForm from './SignupForm.svelte';
</script>

路徑相對於當前組件路徑。./表示“這個相同的文件夾”。您可以使用../回到上一級文件夾，以此類推。

一旦這樣做，您就可以在標記中使用新引入的組件，就像使用HTML標籤一樣：

1
<SignupForm />

通過這種方式，您正在形成兩個組件之間的父子關係：一個是導入組件，另一個是被導入組件。

通常情況下，您希望父組件將數據傳遞給子組件。

您可以使用props來實現。props的行為類似於純HTML中的屬性，它們是單向通信的形式。

在這個例子中，我們將disabled prop傳遞給它，並將JavaScript值true傳遞給它：

1
<SignupForm disabled={true}/>

在SignupForm組件中，您需要導出disabled prop，如下所示：

1
2
3
<script>
export let disabled
</script>

這是表明該prop對父組件可見的方式。

在使用組件時，您可以傳遞一個變量而不是一個值，以動態更改它：

1
2
3
4
5
6
<script>
import SignupForm from './SignupForm.svelte';
let disabled = true
</script>

<SignupForm disabled={disabled}/>

當disabled變量值變化時，子組件將以新的prop值進行更新。例如：

1
2
3
4
5
6
7
<script>
import SignupForm from './SignupForm.svelte';
let disabled = true
setTimeout(() => { disabled = false }, 2000)
</script>

<SignupForm disabled={disabled}/>

tags: [“Svelte”, “props”, “component communication”]