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が何者かというと、イベントハンドラのようです。
※ドロップダウンではクリック・ツールチップではホバーなど。

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