Svelteで小道具を操作する方法

Svelteで小道具を操作する方法を学び、親子関係を持つ2つのコンポーネントを相互に通信させます

構文を使用して、Svelteコンポーネントを他のコンポーネントにインポートできますimport ComponentName from 'componentPath'

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

パスは、現在のコンポーネントパスを基準にしています。./「これと同じフォルダ」を意味します。あなたが使うだろう../1つのフォルダに戻るなど。

これを行うと、HTMLタグのように、マークアップで新しくインポートされたコンポーネントを使用できます。

<SignupForm />

このようにして、インポートするコンポーネントとインポートされるコンポーネントの2つのコンポーネント間に親子関係を形成します。

多くの場合、親コンポーネントに子コンポーネントにデータを渡してもらいたいと思うでしょう。

あなたはを使用してそうすることができます小道具。小道具はプレーン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ハンドブック


より洗練されたチュートリアル: