學習如何在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}/>