Vueでは、サブコンポーネントを呼び出すときに、サブコンポーネントがニーズをより適切に満たすことができるように、サブコンポーネントのコードの特定の部分を変更する場合があります。スロットテクノロジーを使用すると、親コンポーネントが呼び出されたときに、子コンポーネントの構造を現在のコンポーネントによりよく適合させることができます。
スロットテクノロジー：
1.デフォルトスロット（匿名スロット）：
スロットは比較的重く、簡単で連続的な挿入に適しています。テンプレートテンプレートのコンテンツはスロットプレースホルダーに挿入されます。プレースホルダーが複数ある場合は、テンプレートのコンテンツが1回挿入されます。
// 父组件
<div>这是父组件
<Younger :list="list">
<template>
<span>要插入的内容</span>
</template>
</Younger>
</div>
data: function() {
return {
list: [1,2,3,4]
};
},
components: {
Younger
},
// 子组件
我是子组件
<ul>
<li v-for="item in list">
<span v-text="item"></span>
<slot></slot>
</li>
<slot></slot>
</ul>
// 插槽执行后的html结构
<div>这是父组件
我是子组件
<ul>
<li v-for="item in list">
<span v-text="item"></span>
<span>要插入的内容</span>
</li>
<span>要插入的内容</span>
</ul>
</div>演算結果：
2.名前付きスロット：
プレースホルダースロットに名前属性を指定します。親コンポーネントが呼び出されると、テンプレートテンプレートはv-slot：name属性を使用して、特定のスロットの挿入を指定する必要があります。vスロットのないテンプレートはデフォルトのスロットと見なされ、できません。指定されたスロットに挿入されます。
v-slot：[動的スロット名]。省略形にすることもできます。たとえば、v-slot：headerは#headerと同じです。
// 父组件
这是父组件
<Younger :list="list">
<template v-slot:one>
<span>这是插槽：one要插入的内容</span>
</template>
<template v-slot:two>
<span>这是插槽：two要插入的内容</span>
</template>
<template>
<span>这是插槽：two要插入的内容</span>
</template>
</Younger>
// 子组件
我是子组件
<ul>
<li v-for="item in list">
<span v-text="item"></span>
<slot name="one"></slot>
</li>
<slot name="two"></slot>
</ul>演算結果：
3.スコープスロット：
場合によっては、サブコンポーネントのスロットに値を渡して表示する必要があります。このプロセスでは、親コンポーネントが最初に値データを子コンポーネントに渡します。また、親コンポーネントのテンプレートでこの値を使用する必要がありますが、親コンポーネントのデータを直接使用することはできません。同期がとれていない。最良の方法は、子コンポーネントにデータをテンプレートテンプレートに渡させることです。そうすれば、データ値を受け入れて呼び出すことができます。注：子コンポーネントから渡される値はオブジェクトであり、キー名はモデルです。
// 父组件
这是父组件
<Younger :list="list">
<template slot-scope="{ model }">
<span>这是插槽：one要插入的内容</span> |
<span>传过来的值为：{
{model}}</span>
</template>
</Younger>
// 子组件
我是子组件
<ul>
<li v-for="item in list">
<span v-text="item"></span>
<slot :model="item"></slot>
</li>
</ul> 操作の結果は次のとおりです。
つまり、スロットは、子コンポーネントが親コンポーネントの準備をするためのプレースホルダーです。親コンポーネントは、このプレースホルダーを置き換えるために、テンプレートに任意のコードを書き込むことができます。これにより、コードがよりエレガントになります。