vue.js スロットの用途は何ですか?

vue.js スロットの機能: 1. ラベルを表示し、コンポーネント内の [] を通じてそれを受け取ります; 2. スロットに名前を付けてスロットの柔軟性を高めます; 3. パラメータ付きのスロット、スロット内のデータを使用してコンポーネント内のデータを使用します。

このチュートリアルの動作環境: Windows10 システム、vue2.5.2、この記事はすべてのブランドのコンピューターに適用されます。

【おすすめ関連記事: vue.js】

vue.js スロットの役割:

1. 基本的な使用法

コンポーネント ラベル内に他のラベルがネストされている場合、これらのラベルは表示できません。表示したい場合は、中に <slot>&lt を渡します。 ;/slot></slot>受信するには、slot は同じ位置にあるすべてのタグを受信して​​表示します

2.名前付きスロット (名前付きスロット)

利点: スロットの柔軟性が向上します。

スロット属性をコンポーネント タグ内のタグに追加します。属性値はスロット名です:

<div slot="slotName"></div>

コンポーネント内の名前で受信されます:

<slot name="slotName"></slot>

3. スコープスロット: パラメーター付きスロット

コンポーネントタグを使用する場合、コンポーネント内のデータを使用するためにスロット内のデータを使用する必要がある場合、渡されたコンポーネントを受け取るには、コンポーネント タグに

を追加する必要があります。データは props.val を介して渡されます (この val 属性は、コンポーネント内のスロットにバインドされた属性から取得されます)

例:

　　<List>
　　　　<template scope="props"><div>{{props.val}}</div></template>
　　</List>

内部コンポーネント: スロット内のバインド プロパティ

関連する無料学習の推奨事項:

JavaScript (ビデオ)

以上がvue.js スロットの用途は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。