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

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

<script>
import SignupForm from './SignupForm.svelte';
</script>

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

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

<SignupForm />

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

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

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

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

<SignupForm disabled={true}/>

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

<script>
export let disabled
</script>

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

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

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