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

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

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

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

なぜ 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 のスコープ スロットを使用するのでしょうか?いつ使用しますか?

概要

Vue スコープ スロットは非常に複雑ですが、シンプル サブコンポーネント データをスロット コンテンツにアクセスできるようにするという概念は、優れたコンポーネントを設計する場合に役立ちます。データを 1 つの場所に保持し、それを他の場所にバインドすることで、さまざまな状態の管理がより明確になります。

元のアドレス: https://learnvue.co/2021/03/when-why-to-use-vue-scoped-slots/

著者: Ashish Lahoti


翻訳アドレス: https://segmentfault.com/a/1190000039801512

プログラミング関連の知識については、

プログラミング入門をご覧ください。 !

以上がなぜ Vue のスコープ スロットを使用するのでしょうか?いつ使用しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。