vue には 3 種類のスロットがあります: 1. デフォルトのスロット、構文 ""; 2. 名前付きスロット、構文 " "; 3. スコープスロット、構文「 の属性またはオブジェクト」。
このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。
#Vue のスロットは主に 3 つのタイプに分類されます:
デフォルト スロット、名前付きスロット、スコープ スロット スロット
vue のスロットは、親コンポーネントに提供される子コンポーネント内のプレースホルダーを参照します。
はラベルで表され、親コンポーネントはこのプレースホルダーに入力できます。HTML、コンポーネント、など、塗りつぶされたコンテンツは子コンポーネントのタグを置き換えます (プレースホルダーを置き換えます)。
デフォルト スロット
デフォルト スロットは、上記の説明と一致する最も単純なスロットです。つまり、プレースホルダーを置き換えることによって、シンボルは次のことを実現します。親コンポーネント内の子コンポーネントのコンテンツを変更した場合の影響。
構文:
子コンポーネントにプレースホルダー (スロット) を配置します:
<template>
<span>
<span>莎莎减肥</span>
<slot></slot>
</span>
</template>
<script>
export default {
name: 'chassList'
}
</script>ログイン後にコピー
次に、これを参照します。親コンポーネントのサブコンポーネントを作成し、このプレースホルダー (スロット) のコンテンツを入力します:
<template>
<div>
<span>今天吃啥：</span>
<chassList>
<span>大嫂不让莎莎吃饭</span>
</chassList>
</div>
</template>ログイン後にコピー
この時点で、ページに表示されるコンテンツは [今日食べるもの: サーシャの減量姉妹イン] になります。 -法律はサーシャを食べさせません]。
名前付きスロット
たとえば、サブコンポーネント内でプレースホルダーを置換する必要がある場所が 2 か所 (2 スロット) ある場合、次のようになります。親コンポーネントは、対応するコンテンツを対応するスロットに埋め込みたいと考えていますが、デフォルトのスロットに依存して、対応するコンテンツをどのスロットに埋めるべきかを決定する方法はありません。このようなシナリオに対処するために、名前付きスロットが登場しました。
名前付きスロットは、実際には子コンポーネント内のスロットに名前を付けるもので、親コンポーネントは子コンポーネントを参照するときに、この名前に従って対応するスロットを埋めることができます。
構文:
子コンポーネントに 2 つの名前付きスロットを配置します:
<template>
<div>
<span>第一个插槽</span>
<slot name="one"></slot>
<span>第二个插槽</span>
<slot name="two"></slot>
</div>
</template>
<script>
export default {
name: 'chassList'
}
</script>ログイン後にコピー
親コンポーネント内のサブコンポーネントを参照し、v-slot:[name]:
<template>
<div>
<span>两个插槽：</span>
<chassList>
<template v-slot:one>
<span>one，</span>
</template>
<template v-slot:two>
<span>two</span>
</template>
</chassList>
</div>
</template>ログイン後にコピー
を通じて、対応するコンテンツを対応するスロットに埋め込みます。このとき、ページに表示されるコンテンツは [2 つのスロット:最初のスロット 1、2 番目のスロット 2]。
デフォルト スロットと名前付きスロットの使用に関する注意事項
1. 子コンポーネントに複数のデフォルト スロットがある場合、親コンポーネントのすべてのデフォルト スロットはスロットの埋め込み内容 (名前付きスロットが指定されていない) は、子コンポーネントの各デフォルト スロットに埋められます。
2. 親コンポーネントで名前付きスロットの充填順序が乱れた場合でも、名前付きスロットの名前が一致している限り、充填されたコンテンツは対応する名前付きスロットに正しくレンダリングされます。穴です。
3. 子コンポーネントにデフォルトのスロットと名前付きスロットの両方が存在するが、親コンポーネントで指定された名前付きスロットが子コンポーネントで見つからない場合、コンテンツは埋め込まれずに直接破棄されます。デフォルトのスロット。
スコープ スロット
スコープ スロットは、以前のデフォルト スロットや名前付きスロットよりも理解するのが難しくなります。
- 最初の 2 つのスロットは、プレースホルダーを埋める [位置] を強調します。
- スコープ スロットは、データ [スコープ] を強調します。
- スコープ スロットはパラメータ (データ) を持つスロットです。
はサブコンポーネントに挿入されます スロットに取り込まれたパラメータ (データ) が提供されますこのパラメータ(データ)はスロット内でのみ有効であり、親コンポーネントは子コンポーネントから渡されたスロットパラメータ(データ)に基づいて表示内容をカスタマイズできます。
構文:
<スロット: name=data>の属性またはオブジェクトをカスタマイズします。
パラメータ (データ) スロットを配置します:
<template>
<div>
<span>插槽中的参数值是</span>
<slot :isAllwo="isAllwo"></slot>
</div>
</template>
<script>
export default {
name: 'classList',
data() {
return {
isAllwo: {
one: 'one',
two: 'two'
}
}
}
}
</script>ログイン後にコピー
親コンポーネント内のサブコンポーネントを参照し、slot-scope を使用してサブコンポーネントのスロットに渡されたパラメーターを受け入れ、データを使用します。
<template>
<div>
<span>作用域插槽：</span>
<classList>
<template slot-scope="isAllwo">
{{ isAllwo.isAllwo.one}}
</template>
</classList>
</div>
</template>ログイン後にコピー
このとき、ページに表示される内容は「スコープスロット：スロット内のパラメータ値は1」となります。
テンプレート {
{}} は式をサポートしているため、サブコンポーネントによって渡されるさまざまなパラメーター値を使用してページのコンテンツをカスタマイズできます。
<template>
<div>
<span>作用域插槽：</span>
<classList>
<template slot-scope="isAllwo">
{{ isAllwo.isAllwo.one|| '空值' }}
</template>
</classList>
</div>
</template>ログイン後にコピー
このとき、サブコンポーネントで渡されたパラメータがnull値の場合、ページの表示内容は「スコープスロット：スロット内のパラメータ値がnull値」となります。
スコープ スロットにはさまざまな使用シナリオがあり、さまざまなフレームワークで広く使用されています。たとえば、ElementUI では、テーブルの特定の行または列の表示内容をカスタマイズすることをスコープ スロットと呼びます。スロットの代表的な適用シナリオ。
[関連する推奨事項:「
vue.js チュートリアル 」]
以上がvueにはいくつかのスロットがありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
