Vue3 のスロットとテンプレートの違いは何ですか?

まず、たとえ話をしてみましょう。あなたがハンバーガーで、友達がビーフパティ、レタス、チーズなどのさまざまな材料であると仮定します。そして、テンプレートはあなたの体の材料であり、スロットはあなたの友達です。異なるテンプレートを異なるインターフェイスに組み合わせることができるのと同じように、異なる材料を異なるハンバーガーに組み合わせることができます。

では、スロットとテンプレートの使い方を例を挙げて見ていきましょう！

まずはスロットの使い方を見ていきましょう。電子商取引 Web サイトで、ユーザーが商品詳細ページを参照したときに「カートに追加」ボタンを表示したいとします。この目的を達成するために、コンポーネント内のスロットを使用できます。

<template>  
  <div>  
    <h1>{
   
   { product.name }}</h1>  
    <p>{
   
   { product.description }}</p>  
    <slot></slot>  
  </div>  
</template>

この例では、コンポーネントに空のスロットを配置し、親コンポーネントのこのスロットを使用して必要なボタンを挿入します。

<template>  
  <div>  
    <h1>苹果手机</h1>  
    <p>苹果公司推出的智能手机</p>  
    <my-product>  
      <button>加入购物车</button>  
    </my-product>  
  </div>  
</template>

ご覧のとおり、親コンポーネントで my-product コンポーネントを使用し、そこにボタン要素を挿入します。このボタン要素は my-product コンポーネントのスロットにレンダリングされ、それによって製品詳細ページに「カートに追加」ボタンを表示する効果が得られます。

では、テンプレートの使い方を見ていきましょう。ニュース Web サイトで、記事の詳細ページに広告や関連記事の推奨を表示したいとします。この目的を達成するには、コンポーネントでテンプレートを使用できます。

<template>  
  <div>  
    <h1>{
   
   { article.title }}</h1>  
    <p>{
   
   { article.content }}</p>  
    <template v-if="showAds">  
      <ad></ad>  
    </template>  
    <template v-if="showRelated">  
      <related-articles></related-articles>  
    </template>  
  </div>  
</template>

この例では、2 つのテンプレート要素を使用して、広告と関連記事の推奨をそれぞれ表示します。条件 v-if に応じて、テンプレート要素の 1 つだけがレンダリングされます。親コンポーネントでは、このコンポーネントを次のように使用できます。

<template>  
  <div>  
    <h1>人工智能将改变世界</h1>  
    <p>人工智能是现如今计算机领域的一大热门技术...</p>  
    <my-article>  
      <script type="text/x-template">  
        <ad></ad>  
      </script>  
      <script type="text/x-template">  
        <related-articles :articles="relatedArticles"></related-articles>  
      </script>  
    </my-article>  
  </div>  
</template>

ご覧のとおり、親コンポーネントで my-article コンポーネントを使用し、そこに 2 つの script 要素を挿入します。これら 2 つのスクリプト要素には、それぞれ広告コンポーネントと関連記事コンポーネントのテンプレートコードが含まれています。my-article コンポーネントでは、条件 v-if に基づいてレンダリングするスクリプト要素の 1 つが選択されます。このようにして、記事の詳細ページに広告や関連記事のおすすめを表示できます。

では、スロットとテンプレの違いをまとめてみましょう！

スロットは、コンポーネント内に空のスロットを定義する方法であり、親コンポーネントにそのスロットを埋めることができるため、コンポーネントの機能を拡張できます。スロット要素には、HTML 要素やコンポーネントを含む任意のコンテンツを含めることができます。

template 要素は、コンポーネント内でテンプレートを定義する方法であり、条件に基づいてレンダリング用のさまざまなテンプレートを選択できます。template 要素にはテンプレートコードのみを含めることができ、他のコンテンツは含めることはできません。

たとえば、レストランで、メニューにスープ項目を表示したいとします。スロットを使用して空のスロットを定義し、親コンポーネントでこのスロットを使用してスープの名前と価格を挿入できます。

<template>  
  <div>  
    <h1>菜单</h1>  
    <slot></slot>  
  </div>  
</template>

親コンポーネントでは、このメニューコンポーネントを次のように使用できます。

<template>  
  <div>  
    <my-menu>  
      <script type="text/x-template">  
        <h2>今日汤品：</h2>  
        <p>{
      
      {
      
       soupName }}</p>  
        <p>{
      
      {
      
       soupPrice }}</p>  
      </script>  
    </my-menu>  
  </div>  
</template>

このようにして、メニューにスープの名前と価格を表示することができます。また、メニューに複数のスープ項目を表示したい場合は、親コンポーネントで複数のスロット要素を使用し、各スロットに異なるコンテンツを挿入できます。

要約すると、スロットとテンプレートは Vue3 の非常に便利な機能です。ニーズに応じてコンポーネントの機能を拡張するために使用する方法を選択できるため、より柔軟で再利用可能なコードを作成できます。最後に、Vue3 の詳細とベストプラクティスを知りたい場合は、Vue3 の公式ドキュメントを参照してください。このドキュメントには、多くの役立つ情報とガイダンスが含まれています。