Edited at

Vuetifyのv-slot:activatorの使い方

※v-slotの構文はVue 2.6.0以上から使用できます。

v-slotの使用方法は以下の公式ドキュメントに説明があります。

https://jp.vuejs.org/v2/guide/components-slots.html#%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%97%E4%BB%98%E3%81%8D%E3%82%B9%E3%83%AD%E3%83%83%E3%83%88


v-slot:activatorとは?

Vuetifyでv-slot:activatorというスロットをよく見かけます。

これは特定の条件時(クリック時・ホバー時のみなど)のみポップアップする場合のトリガー用のスロットとして用意されています。


TL;DR


  • activatorスロットにはポップアップを付与したい要素を記述

  • デフォルトスロットにはポップアップで表示する要素を記述



    • @totto357さんからコメント欄で補足していただきました。ありがとうございます。





ドロップダウンメニュー(v-menu)

https://vuetifyjs.com/en/components/menus


v-menu.vue

<v-menu>

<template v-slot:activator="{ on }">
//ポップアップを追加したい要素に対しv-on="on"を追加
<v-btn color="primary" dark v-on="on">Dropdown</v-btn>
</template>
//ポップアップの内容
<v-list>
<v-list-item v-for="n in 3" :key="n">
<v-list-item-title>{{ n }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>



ツールチップ(v-tool-tip)


v-tooltip.vue

<v-tooltip bottom>

//ポップアップを追加したい要素に対しv-on="on"を追加
<template v-slot:activator="{ on }">
<v-btn color="primary" dark v-on="on">Button</v-btn>
</template>
//ポップアップの内容
<span>Tooltip</span>
</v-tooltip>

どちらもv-slot:activatorを使用してポップアップを実現しています。

コードも似ていますね。


補足

v-slot:activator="{ on }

このスロットプロパティのonが何者かというと、イベントハンドラのようです。

※ドロップダウンではクリック・ツールチップではホバーなど。

コンポーネントごとにカプセル化されているので、使用する側はそのままバインドするだけで大丈夫そうですね。