v-slot ~親側と子側のスロットを対応付ける~

名前付きスロット

v-slotで名前付きスロットにすれば、複数のslotを利用して複雑なデータを渡すことができる。

親コンポーネント側

templateタグ内でv-slotを使う

<Child>
    <template v-slot:title>
        <h1>いいね数</h1>
        <h2>{{ number }}</h2>
    </template>
</Child>

<template #title> // 省略形

子コンポーネント側

name属性の値をv-slotの値にする

<div>
    <slot name="title"></slot>
</div>

スロット名を動的に指定する

<template v-slot:[title]></template>
 
data() {
    return {
        title: "title"
    }
}