【Vue.js】slot で HTMLタグやデータを渡す

はじめに

slot を学習したので備忘録的に書きます。

slot とは

子コンポーネントにコンテンツ（HTMLタグやdata, props など）を渡すことができるもの。

と解釈。

参考資料（リファレンス）

HTMLタグを渡す

Childe.vue

<template>
  <div>
    <slot></slot>
  </div>
</template>

Parent.vue

<template>
  <div>
    <Childe>
      <p>スロットだよ</p> <!-- ここの記述をタグごと渡す -->
    </Childe>
  </div>
</template>

<script>
import Childe from "./Childe.vue";

export default {
  components: {
    Childe,
  }
}
</script>

propsのデータも一緒に渡す

Childe.vue

<template>
  <div>
    <slot></slot>
    <p>{{ propsText }}</p> <!-- 受け取ったpropsを表示 -->
  </div>
</template>

<script>
export default {
  props: ['propsText'],
}
</script>

Parent.vue

<template>
  <div>
    <Childe props-text="プロップステキスト"> <!-- propsの渡し口 -->
      <p>スロットだよ</p>
    </Childe>
  </div>
</template>

<script>
import Childe from "./Childe.vue";

export default {
  components: {
    Childe,
  }
}
</script>

親dataを渡す

Childe.vue

<template>
  <div>
    <slot></slot>
    <p>{{ propsText }}</p>
  </div>
</template>

<script>
export default {
  props: ['propsText'],
}
</script>

Parent.vue

<template>
  <div>
    <Childe props-text="プロップステキスト">
      <p>スロットだよ</p>
      <p>{{ data }}</p> <!-- data を受け取る -->
    </Childe>
  </div>
</template>

<script>
import Childe from "./Childe.vue";

export default {
  data() {
    return {
      data: "データ",
    }
  },
  components: {
    Childe,
  }
}
</script>

複数slotに個別に名前をつけて使い分ける

Childe.vue

<template>
  <div>
    <slot name="text"></slot> <!-- slotに名前をつける -->
    <slot name="data"></slot> <!-- slotに名前をつける -->
    <p>{{ propsText }}</p>
  </div>
</template>

<script>
export default {
  props: ['propsText'],
}
</script>

Parent.vue

<template>
  <div>
    <Childe props-text="プロップステキスト">
      <template v-slot:text> <!-- 名前を付けたslotに対応させるコンテンツを指定 -->
        <p>スロットだよ</p>
      </template>
      <template v-slot:data> <!-- 名前を付けたslotに対応させるコンテンツを指定 -->
        <p>{{ data }}</p>
      </template>
    </Childe>
  </div>
</template>

<script>
import Childe from "./Childe.vue";

export default {
  data() {
    return {
      data: "データ",
    }
  },
  components: {
    Childe,
  }
}
</script>