ホームページ > 記事 > ウェブフロントエンド > なぜ 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: 'hello world', } } } </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: 'title', description: 'description', }, } }, } </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>その後、親コンポーネントで、
および
v-slot ディレクティブを使用してすべてのスロット プロパティにアクセスできます。
// ParentComponent.vue
<template>
<div>
<child-component>
<template v-slot="article">
</template>
</child-component>
</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 スコープ スロットは非常に複雑ですが、シンプル サブコンポーネント データをスロット コンテンツにアクセスできるようにするという概念は、優れたコンポーネントを設計する場合に役立ちます。データを 1 つの場所に保持し、それを他の場所にバインドすることで、さまざまな状態の管理がより明確になります。
元のアドレス: https://learnvue.co/2021/03/when-why-to-use-vue-scoped-slots/著者: Ashish Lahotiプログラミング関連の知識については、翻訳アドレス: https://segmentfault.com/a/1190000039801512
プログラミング入門をご覧ください。 !
以上がなぜ Vue のスコープ スロットを使用するのでしょうか?いつ使用しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。