Vuetifyのv-slot:activator="{ on }"の仕組み
パッと読んだが、うーん、なんか頭に入ってこない
code:vue
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<span v-on="on">This text has a tooltip</span>
</template>
<span>Tooltip</span>
</v-tooltip>
ここの、v-slot:activatorは、v-tooltipからactivatorというslotを取得するという意味
公式に、slots の説明がある
https://gyazo.com/b14e2db00329a4a2773caf25c97f4119
<template v-slot:activator="{ on }"> は、上記の activator slot から onプロパティを分割代入で取得している。
on の中には eventHandler が入っている
<span v-on="on">では、上で取得した on が展開されるので、実質v-on="{ [eventName]: eventHandler }"となる。
v2.4.0 で追加されたオブジェクト構文による指定となり、v-tooltip の場合はおそらく mouse hover の event で、文字を表示する eventHandler が登録されていると思われる
code:vue
<!-- オブジェクト構文 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>