コンセプト
簡単に理解すると、コンポーネントが対応するテンプレート コードを渡すために、コンポーネント内に 1 つ以上のスロットが残されます。スロットの出現により、コンポーネントの柔軟性がさらに高まりました。
1.匿名スロット
親コンポーネント
<son>
<p>我是父组件通过匿名插槽传输的内容</p>
</son>
サブアセンブリ
<template>
<div>
我是子组件
<slot></slot>
</div>
</template>
<script>
export default {
}
</script>
スタイル
もちろん、次のようにスロット タグにコンテンツを直接記述することもできます。
<son>
</son><template>
<div>
我是子组件
<slot>我是后补内容</slot>
</div>
</template>
<script>
export default {
}
</script>
この言語は、親コンポーネントがコンテンツを転送しないことを意味します。場合によっては、コンテンツが提供されていない場合にのみレンダリングされる特定のフォールバック (つまり、デフォルト) コンテンツをスロットに設定すると便利です。
2. 名前付きスロット
名前が示すように、これは名前付きスロットです。コンポーネント内で複数のスロットの位置を予約する必要がある場合は、スロットの名前を定義し、挿入位置を指定する必要があります。
Vue バージョン 2.6.0 以降では、スロットとスロット スコープの代わりに v-slot が使用されます。
注:
1. 名前付きスロットのコンテンツは、テンプレート <template></template> でラップする必要があります;
2. 名前が指定されていないテンプレートは、匿名スロットに挿入されます コード追跡を容易にし、直観的でわかりやすくするために、名前付きスロットを使用することをお勧めします。クリア;
3. 匿名スロットには隠し名「default;」が付いています。
2.1 名前付きスロットの略称
v-on や v-bind と同様、v-slot にも省略形があり、パラメーター (v-slot:) より前のすべてが文字 # に置き換えられます。
たとえば、v-slot:header は #header として書き換えることができます
が、他のディレクティブと同様、この省略形はパラメータがある場合にのみ使用できます。これは、次の構文が無効であることを意味します。
親コンポーネント
<son :title="name">
<template #header><p>我是头部</p></template>
<template #body><p>我是身体</p>
</template>
<template v-slot:[name]><p>我是脚部</p>
</template>
</son>サブアセンブリ
<template>
<div>
我是子组件{
{title}}
<slot name="footer"></slot>
<slot name='body'></slot>
<slot name="header"></slot>
</div>
</template>
<script>
export default {
props: {
title: String
}
}
</script>
2.2 動的スロット名
動的コマンド パラメータを v-slot で使用して、動的スロット名を定義することもできます。
<template v-slot:[name]><p>我是脚部</p>
</template>3. スコープスロット
3.1 父から息子へ
親コンポーネント
<son :title="name">
<template #header><p>我是头部</p></template>
<template #body><p>我是身体</p>
</template>
<template v-slot:[name]><p>我是脚部</p>
</template>
</son>
</el-row>サブアセンブリ
<template>
<div>
我是子组件{
{title}}
<slot name="footer"></slot>
<slot name='body'></slot>
<slot name="header"></slot>
</div>
</template>
<script>
export default {
props: {
title: String
}
}
</script>
親コンポーネントによって渡されたスロットのコンテンツは子コンポーネントによってコンパイルされ、スロットのスコープは子コンポーネントによって決定されます。
したがって、スロットの内容を動的に変更する必要がある場合は、サブコンポーネントから親コンポーネントにパラメータを渡す必要があります。
3.2 子传父
親コンポーネントは子コンポーネントにパラメータを渡し、プロパティを受け取った後、スロットはバインディング属性を通じてパラメータを親コンポーネントに返します。テンプレート コードであってもデータであっても、コントロールは完全に親コンポーネントの手に渡ります。 。
最初の方法
親コンポーネント
<son :title="name">
<template #header="header">{
{header.header}}</template>
<template #body="body">{
{body.body}}
</template>
<template #footer="footer">{
{footer.footer}}
</template>
</son>サブアセンブリ
<template>
<div>
我是子组件
<slot name="footer" :footer="title.footer"></slot>
<slot name='body' :body="title.body"></slot>
<slot name="header" :header="title.header"></slot>
</div>
</template>
<script>
export default {
props: {
title: Object
}
}
</script>
スタイル
第二の方法
子组件通过属性 <slot :自定义属性名 = '值'></slot>，将自己内部的原始类型给到父组件；
父组件 <template slote-scope='自定义接收'></template>；
子组件 slot 除了要占个位置还要传递参数，父组件 slote-scope 负责接收参数；
親コンポーネント
<son :list="provinces">
<template slot-scope="slotProps">
<h4 v-for="city in slotProps.cities" :key="city.id" >
城市： {
{city.name}}
</h4>
</template>
</son>サブアセンブリ
<template>
<div class="footerComponent">
<div v-for="item in list" :key="item.id">
<h2>省份：{
{item.name}}</h2>
<slot :cities="item.cities"></slot>
</div>
</div>
</template>
<script>
export default {
props: {
title: Object,
list: {
type: Array,
default: function() {
return []
}
}
}
}
</script>
親は子に州を渡し、子は子ノートに渡されます。子コンポーネントは props を受け取り、子は item.cities を親に渡し、親テンプレートはスロットスコープを使用してそれを受け取ります。