1.スロットの紹介
スロットは基本的にコンポーネントのHTMLテンプレートです。スロットの表示は、親コンポーネントによって決定されます。
スロットの中心的な問題は、（1）表示するかどうか、（2）表示方法です。
コンポーネント内の非スロットテンプレートは、htmlテンプレート（div、span、ul、tableなど）を参照します。非スロットテンプレートの表示と非表示、および表示方法は、それ自体で制御されます。
スロットテンプレートは実際には空のシェルです。これは、HTMLテンプレートの表示と非表示、および最終的な表示が親コンポーネントによって制御されるためです。ただし、スロット表示の位置は、子コンポーネント自体と、スロットが書き込まれる場所によって決まります。子コンポーネントテンプレートでは、親コンポーネントから渡されたテンプレートは今後どこに表示されますか
スロット分類
- シングルスロット（匿名スロットまたはデフォルトスロットとも呼ばれます）
- 名前付きスロット
- スコープスロット
2つ、1つのスロット
この種のスロットは、name属性を設定する必要がなく、コンポーネントの任意の位置に配置できます。コンポーネントには「単一のスロット」を1つだけ含めることができます。
親コンポーネント
子コンポーネントの子は親コンポーネントで使用され、htmlテンプレートが定義されます。htmlテンプレートは、サブコンポーネントの匿名スロット位置に表示されます
<template>
<div class="father">
<h3>这里是父组件</h3>
<child>
<div class="tmpl">
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
<span>菜单4</span>
<span>菜单5</span>
<span>菜单6</span>
</div>
</child>
</div>
</template>
サブアセンブリ
<template>
<div class="child">
<h3>这里是子组件</h3>
<slot></slot>
</div>
</template>
最終的なレンダリング結果を図に示します。
3つの名前付きスロット
name属性は、名前付きスロットであるスロットに追加されます。名前付きスロットは、異なる位置で、コンポーネントにN回出現する可能性があります。次の例は、2つの名前付きスロットと1つのスロットで構成されるコンポーネントです。これらの3つのスロットは、同じcssスタイルのセットを持つ親コンポーネントによって表示されます。違いは、コンテンツがわずかに異なることです。
親コンポーネント
<template>
<div class="father">
<h3>这里是父组件</h3>
<child>
<div class="tmpl" slot="up">
<span>菜单1</span>
<span>菜单2</span>
<span>菜单3</span>
<span>菜单4</span>
<span>菜单5</span>
<span>菜单6</span>
</div>
<div class="tmpl" slot="down">
<span>菜单-1</span>
<span>菜单-2</span>
<span>菜单-3</span>
<span>菜单-4</span>
<span>菜单-5</span>
<span>菜单-6</span>
</div>
<div class="tmpl">
<span>菜单->1</span>
<span>菜单->2</span>
<span>菜单->3</span>
<span>菜单->4</span>
<span>菜单->5</span>
<span>菜单->6</span>
</div>
</child>
</div>
</template>
サブアセンブリ
<template>
<div class="child">
// 具名插槽
<slot name="up"></slot>
<h3>这里是子组件</h3>
// 具名插槽
<slot name="down"></slot>
// 匿名插槽
<slot></slot>
</div>
</template>
表示結果を図に示し
ます。親コンポーネントが、htmlテンプレートのslot属性を介して名前付きスロットに関連付けられていることがわかります。スロット属性のないhtmlテンプレートは、デフォルトで匿名スロットに関連付けられています
4、スコープスロット
スコープスロットでは、データをスロットにバインドする必要があります
<slot name="up" :data="data"></slot>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
},
}
前述のように、スロットが最後に表示されるかどうかは、次のように、親コンポーネントが子コンポーネントの下にテンプレートを書き込んだかどうかによって異なります。
<child>
html模板
</child>
スコープスロットはデータセットにバインドされているため、親コンポーネントはそれを使用できます。したがって、状況は次のようになります。スタイルの親コンポーネントに最終決定権がありますが、コンテンツには子コンポーネントのスロットバインディングを表示できます。
スコープスロットと他の2つのスロットの違い：
単一スロットと名前付きスロットはデータをバインドしないため、親コンポーネントによって提供されるテンプレートには、スタイルとデータコンテンツの両方が含まれます。
スコープスロットでは、親コンポーネントは一連のスタイルを提供するだけで済みます
親コンポーネント
<template>
<div class="father">
<h3>这里是父组件</h3>
<!--第一次使用：用flex展示数据-->
<child>
<template slot-scope="user">
<div class="tmpl">
<span v-for="item in user.data">{
{
item}}</span>
</div>
</template>
</child>
<!--第二次使用：用列表展示数据-->
<child>
<template slot-scope="user">
<ul>
<li v-for="item in user.data">{
{
item}}</li>
</ul>
</template>
</child>
<!--第三次使用：直接显示数据-->
<child>
<template slot-scope="user">
{
{
user.data}}
</template>
</child>
<!--第四次使用：不使用其提供的数据, 作用域插槽退变成匿名插槽-->
<child>
我就是模板
</child>
</div>
</template>
サブアセンブリ
<template>
<div class="child">
<h3>这里是子组件</h3>
// 作用域插槽
<slot :data="data"></slot>
</div>
</template>
export default {
data: function(){
return {
data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
}
}
}
結果を次の図に示します。
5、その他の知識ポイント
5.1スロットとスロットの違い
スロットはスロットを定義するために使用されます。スロットは参照の使用法と同等です。スロットは、コンテンツ配信を実現するためにvueコンポーネントで定義されたスロットを取得するために使用されます。
5.2スロットスコープの紹介
スロットスコープは、サブコンポーネントにバインドされたデータ属性を表します
5.3vスロット
v-slotコマンドは、slotおよびslot-scopeの代替です。
形式は次のとおりです。
v-slot:title="nodeData"
v-slot：スロット名=サブコンポーネントの内部バインディングデータ（nodeDataには任意の名前を付けることができます）