【Vue.js】v-slotの使い方

v-slotの使い方

// これが親コンポーネント
<template>
<div>
  <LikeHeader>
    <template v-slot:title>  // v-slotを使用する時は必ずtemplateタグで囲まなければいけない。
      <h1>こんにちは</h1>
    </template>
    <template v-slot:number>
      <h2>{{ number }}</h2>
    </template>
  </LikeHeader>
  <LikeNumber :total-number="number" @my-click="number= $event"></LikeNumber>
  <LikeNumber :total-number="number"></LikeNumber>
</div>
</template>

<script>
import LikeHeader from "./components/LikeHeader.vue";

export default {
  data() {
    return {
      number: 18
    };
  },
  components: {
    LikeHeader
  }
}
</script>

// こっちが子コンポーネント
<template>
  <div>
    <slot name="title"></slot> // 親コンポーネントのv-slotで指定したnameをこのslotタグに渡す
    <slot></slot>
    <hr>
    <p>いいねの数</p>
    <slot name="number"></slot>  
  </div>
</template>

<script>
export default {
  props: ["headerText"]
};
</script>

これでslotごとに表示を変えることができる。

親コンポーネントでv-slotを使用する時は、divタグなどで囲むとエラーが出る。
必ずtemplateタグを使用する。