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

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

青灯夜游
リリース: 2022-05-17 09:50:09
転載
3010 人が閲覧しました

この記事では、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>
ログイン後にコピー

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