※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>
<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 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が何者かというと、イベントハンドラのようです。
※ドロップダウンではクリック・ツールチップではホバーなど。
コンポーネントごとにカプセル化されているので、使用する側はそのままバインドするだけで大丈夫そうですね。