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

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

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

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

vue.js スロットの役割:

1. 基本的な使用法

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

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

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

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

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

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

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

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

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

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

例:

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

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

5f58ed85131415ffe3d862526695a9307971cf77a46923278913ee247bc958ee

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

JavaScript (ビデオ)

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