ホームページ >ウェブフロントエンド >Vue.js >なぜ Vue のスコープスロットを使用するのでしょうか?いつ使用しますか?

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

青灯夜游転載: 2021-04-21 19:00:563014ブラウズ

この記事では、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 が表示されます。

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

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

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

// Doesn&#39;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>

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

これで、すべてのスロットプロパティ (この例では、

info のみ) が article オブジェクトのプロパティとして利用可能になり、簡単に変更できます。 slot を使用して、description コンテンツを表示します。

// ParentComponent.vue 
<template>
  <div>
    <child-component>
      <template v-slot="article">
        {{ article.info.description }}
      </template>
    </child-component>
  </div>
</template>

最終的な効果は次のとおりです:

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