【Vue.js】v2.6からの名前付きslotの書き方

はじめに

Vue.jsのバージョン2.6からslotの書き方が変更になりました。
一応、今までの使い方はサポートされていますが、今後サポートされなくなるみたいですね。
- slotについて公式HP

はじめに
新しい書き方
インラインで書く方法
おまけ：v-forと動的なslot名
謝辞
参考

新しい書き方

slotからv-slotという書き方に変わったみたいですね。
また、v-slotは#が省略記法みたいです。

ファイル階層

/src/
- App.vue
- ChildComponent.vue

普通の書き方

<!-- App.vue -->
<template>
  <child-component>
    <template #slotname>
      上書きできました
    </template>
  </child-component>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot name="slotname"></slot>
  </div>
</template>

動的なslot名の付け方

<!-- App.vue -->
<template>
  <child-component>
    <template #[dynamicSlotName]>
      上書きできました
    </template>
  </child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'App',
  components: {
    ChildComponent
  },
  data () {
    return {
      dynamicSlotName: 'slotname'
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot name="slotname"></slot>
  </div>
</template>

インラインで書く方法

<!-- App.vue -->
<template>
  <child-component>
    <template #[`slotname`]>
      上書きできました
    </template>
  </child-component>
</template>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot name="slotname"></slot>
  </div>
</template>

おまけ：v-forと動的なslot名

下記のようにすることで、ループを使いながら動的なslot名を書くことができるぞ！

<!-- App.vue -->
<template>
  <child-component>
    <template v-for="(item, index) of items" #[item]>
      上書きできました
    </template>
  </child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  name: 'App',
  components: {
    ChildComponent
  },
  data () {
    return {
      items: ['slotname1', 'slotname2']
    }
  }
}
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <slot name="slotname1"></slot>
    <slot name="slotname2"></slot>
  </div>
</template>