Svelteで小道具を使用する

ReactやVue.jsなどの他のフレームワークで人気のある小道具は、コンポーネントの通信を可能にする非常に効率的な方法です。 あなたが期待するように、小道具はSvelteで使用されます。 これらは親コンポーネントから子にトップダウンで渡され、コンポーネントがDOMで何をレンダリングするかを通知するために消費できるデータを指定するために使用されます。

単純なCardコンポーネントを作成して、小道具を使用する方法を示しましょう。

<script>
  export let title;
  export let description;
  export let imageUrl;
</script>

<style>
  h1 {
    color: coral;
  }
  section {
    border-radius: 8px;
    box-shadow: 0 0 4px rgba(255, 0, 0, 0.1);
    max-width: 600px;
    margin: 1rem auto;
    padding: 1rem 2rem;
  }
  img {
    width: 32px;
    height: 32px;
    margin-right: 12px;
    vertical-align: middle;
  }
</style>

<section>
  <h1>
    <img src={imageUrl} alt="Avatar for {title}" />
     {title}
  </h1>

  <p>{description}</p>
</section>

ご覧のとおり、 ES6エクスポート構文を使用して、コンポーネントが受け入れる小道具についてSvelteに通知します。 次に、単純な値の補間を使用して、コンポーネント内の小道具を利用できます。

次に、次のような小道具を提供することで、コンポーネントを利用できます。

<script>
  import Card from "./Card.svelte";
</script>

<Card
  title="See you later, Alligator"
  imageUrl="https://alligator.io/images/alligator-logo3.svg"
  description="Not so soon, baboon!" />

オプションの小道具のデフォルト値

現在の設定では、小道具を渡さなかった場合、Svelteはコンソールに警告を表示します。

<script>
  import Card from "./Card.svelte";
</script>

<Card
  title="See you later, Alligator"
  description="Not so soon, baboon!" />

これにより、警告は<Card> was created without expected prop 'imageUrl'になります。

これを修正するには、次のようなものを使用して、宣言された任意のプロップのデフォルト値を提供できます。

<script>
  export let title;
  export let description = "Description coming soon!";
  export let imageUrl = "https://picsum.photos/64";
</script>

<style>
  /* ... */
</style>

<section>
  <h1>
    <img src={imageUrl} alt="Avatar for {title}" />
     {title}
  </h1>

  <p>{description}</p>
</section>

これで、descriptionまたはimageUrlを渡さずに、Cardコンポーネントを使用でき、コンポーネントはデフォルト値に戻ります。

<script>
  import Card from "./Card.svelte";
</script>

<Card
  title="Tood-a-loo, Kangaroo!" />

小道具を広げる

JSX で小道具を拡散する方法と同様に、Svelteを使用すると、コード内のオブジェクトから小道具を拡散して、余分な入力を回避できます。

これは、小道具の拡散を長い形式で小道具を入力することと比較する例です。

<script>
  import Card from "./Card.svelte";

  const items = [
    {
      id: 1
      title: "Pirate",
      description: "Argg!!",
      imageUrl: "https://alligator.io/images/pirate.svg"
    },
    {
      id: 2
      title: "Chef",
      description: "À la soupe!",
      imageUrl: "https://alligator.io/images/chef.svg"
    }
  ];
</script>

<!-- Without spread: -->
{#each items as item}
  <Card
    title={item.title}
    description={item.description}
    imageUrl={item.imageUrl}
  />
{/each}

<!-- With spread: -->
{#each items as item}
  <Card {...item} />
{/each}

itemsのオブジェクトから小道具を広げるときに、追加のプロパティ（id）も渡されることに注意してください。 Cardコンポーネントは、idを小道具として使用することを宣言していないため、無視されます。