なぜ Vue のスコープ スロットを使用するのでしょうか?いつ使用しますか?

この記事では、vue のスコープ スロットについて詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

Vue スロットは、親コンポーネントから子コンポーネントにコンテンツを挿入する優れた方法です。 (学習ビデオ共有: vue ビデオ チュートリアル)

次は基本的な例です。親の slot コンテンツを提供しない場合は、親のみを提供します。 <slot></slot> のコンテンツはバックアップ コンテンツとして使用されます。

// ChildComponent.vue
<template>
  <div>
     <slot> Fallback Content </slot>
  </div>
</template>

次に、親コンポーネントで:

// ParentComponent.vue
<template>
   <child-component>
      Override fallback content
   </child-component>
</template>

コンパイル後の DOM は次のようになります。

<div> Override fallback content </div>

親スコープからのデータを slot コンテンツにラップすることもできます。したがって、コンポーネントに name というデータ フィールドがある場合、次のように簡単に追加できます。

<template>
   <child-component>
      {{ text }} 
   </child-component>
</template>

<script>
export default {
   data () {
     return {
       text: &#39;hello world&#39;,
     }
   }
}
</script>

[関連する推奨事項: vue.js チュートリアル]

スコープ スロットが必要な理由

別の例を見てみましょう。 ArticleHeader コンポーネント、data には記事情報が含まれています。

// ArticleHeader.vue
<template>
  <div>
    <slot v-bind:info="info"> {{ info.title }} </slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {
        title: &#39;title&#39;,
        description: &#39;description&#39;,
      },
    }
  },
}
</script>

slot コンテンツを詳しく見てみましょう。バックアップ コンテンツは info.title をレンダリングします。

デフォルトのフォールバックコンテンツを変更せずに、このようにしてこのコンポーネントを簡単に実装できます。

// ParentComponent.vue
<template>
  <div>
    <article-header />
  </div>
</template>

ブラウザに title が表示されます。

テンプレート式をスロットに追加することでスロットの内容をすばやく変更できますが、子コンポーネントからレンダリングしたい場合は info.description、何が起こりますか?

次のような方法で実行することを想定しています:

// Doesn't work!
<template>
  <div>
    <article-header>
        {{ info.description }}
    </article-header>
  </div>
</template>

ただし、次のように実行するとエラーが報告されます: TypeError: 未定義のプロパティ「説明」を読み取れません。

これは、親コンポーネントがこの info オブジェクトが何であるかを認識していないためです。

それでは、どうやって解決すればいいのでしょうか?

スコープ付きスロットの紹介

つまり、スコープ付きスロットを使用すると、親コンポーネントのスロット コンテンツが子コンポーネント内でのみ見つかるデータにアクセスできるようになります。 たとえば、スコープ付きスロットを使用して、親コンポーネントに info へのアクセスを許可できます。

これを行うには 2 つの手順が必要です。

• v-bind を使用して、 情報を使用して slot コンテンツを利用できるようにします。
• 親スコープで v-slot を使用して、slot 属性にアクセスします

まず、# を有効にするために、 # #info は親オブジェクトで使用でき、info オブジェクトをスロットのプロパティとしてバインドできます。これらの境界付きプロパティは slot props と呼ばれます。

// ArticleHeader.vue
<template>
  <div>
    <slot v-bind:info="info"> {{ info.title }} </slot>
  </div>
</template>

その後、親コンポーネントで、