tomatoaiu の Tech Blog

プログラミングやツールについてのまとめブログ

MENU

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

はじめに

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

新しい書き方

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>

謝辞

Vue.js version 2.6 の slot の書き方が分からなかったので、Vue Forumにて、Vue.2.6の動的なスロット名の付け方でインラインで書くことは可能? と質問したところ、8cf022さんにご回答をいただけました。この場をかりて、厚く御礼を申し上げます。

参考

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js

  • 作者:MIO
  • 発売日: 2018/05/29
  • メディア: Kindle版