vuejsのslot完全に理解した

やりたいこと

あるコンポーネントを複数のVueファイルから呼ぶ。このとき、表示する文字を呼び出し元ごとに変えたい

components/MyComponent.vue

<template>
  <div>
    <h1>ここは親ページによってタイトルを変えたい</h1>
  </div>
</template>

<template>
  <div class="container">
    <MyComponent>
      ここはcomponentsページです
    </MyComponent>
  </div>
</template>

<script>
import MyComponent from '~/components/MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}
</script>

やり方

components/MyComponent.vueを以下にするだけ。親は特に弄ることはない

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

複数渡したい場合

名前をつけてあげる

components/MyComponent.vue

<template>
  <div>
    <h1>
      <slot name="title" />
    </h1>
    <p>
      <slot name="date" />
    </p>
  </div>
</template>

pages/components.vue

<template>
  <div class="container">
    <MyComponent>
      <template v-slot:title>
        ここはcomponentsページです
      </template>
      <template v-slot:date>
        2020-06-16
      </template>
    </MyComponent>
  </div>
</template>

<script>
import MyComponent from '~/components/MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}
</script>