소개

Vuetify의 v-tooltip을 사용하면,
공식 문서 샘플에서 이러한 코드를 봅니다.

    <v-tooltip bottom>
      <template v-slot:activator="{ on }">
        <span v-on="on">This text has a tooltip</span>
      </template>
      <span>Tooltip</span>
    </v-tooltip>

우선 copipe에서 사용할 수 있지만,v-slot:activator="{ on }" 뭐야,v-on="on" 뭐하고 있니? ? ?
라는 바람에 의문을 가지고 있었기 때문에 조사해 보았습니다.

v-slot:activator란?

첫째, 전반부의 v-slot:activator는 v-tooltip에서 activator라는 슬롯을 얻는다는 의미였습니다.
한번 더 공식 문서 를 보자.
API에 PROPS와 SLOTS가 있습니까? (솔직히 지금까지 눈치 채지 못했다 (땀))
SLOTS를 보면,

activator와 default의 두 종류가 있었다.
그래, 이 activator가 v-slot:activator 의 activator입니다.
v-slot:activator 는 명명된 슬롯을 작성하는 방법으로,<template #activator="{ on }"> 라는 바람으로 줄일 수도 있습니다.
그건 그렇고, v-slot은 template에서만 사용할 수 있습니다.

#activator="{ on }"이란?

activator를 알았는데, 후반의 ="{ on }"의 수수께끼를 다가갑니다.
날카로운 분은 눈치채고 생각합니다만,
위의 이미지에 activator의 Props에는 이런 설명이 있었습니다.

{
  on: { [eventName]: eventHandler }
  value: boolean
}

on이다! ! !
on은 슬롯 activator의 속성입니다!
하지만 #activator="{ on }" 라는 쓰는 법은?
Vue.js 공식 사이트에서 v-slot 작성 를 보면,

<!-- 分割代入でプロパティを受け取るデフォルトスロット -->
<mouse-position v-slot="{ x, y }">
  Mouse position: {{ x }}, {{ y }}
</mouse-position>

라는 쓰는 방법이있었습니다.
그래, #activator="{ on }" 라는 것은
슬롯 activator로부터 on이라는 프로퍼티를 취득해, 분할 대입(프로퍼티 on을 on이라고 하는 변수명에 대입) 하는 것입니다.

그리고 걱정되는 on의 내용은?
activator의 event listeners입니다.
위 이미지 API Description에는 다음이 포함되어 있습니다.

When used, will activate the component when clicked (or hover for specific components).

슬롯 activator는 Click 이벤트 (또는 Hover 이벤트)에 반응합니다.
v-tooltip이면 Hover 이벤트가 대상이 될 것으로 생각됩니다. (그 때문에, 포인터를 겹칠 때에 반응한다)
실제로 들어 있는 event listeners를 확인하고 있지 않으므로, 걱정되는 분은 스스로 조사해 주세요.

v-on="on"이란?

v-slot:activator="{ on }" 알았기 때문에,
이번에는 v-on="on"를 살펴 보겠습니다.

Vue.js 공식 사이트에서 v-on 작성 에 다음과 같은 구문이 있습니다.

<!-- オブジェクト構文 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

솔직히 지금까지 알고 있던 v-on의 쓰는 방법은 v-on:[event]/@[event] 뿐이었습니다.
분명히 객체 구문을 사용하면 이벤트 유형을 지정하지 않고 객체 내용으로 지정할 수 있습니다.
(그렇게 함으로써 여러 이벤트 핸들러를 단번에 지정할 수 있습니다)

자, 이것을 근거로 한번 더 되돌아 보자.
activator의 Props on의 정의가 이렇게 됩니다.

on: { [eventName]: eventHandler }

즉 v-on="on" 는 v-on="{ [eventName]: eventHandler }" 로,
위의 객체 구문에 적용됩니다.

그건 그렇고, @onv-on:on="eventHandler" 아니기 때문에 물론 오류가 발생합니다.

참고 자료

[Documentation] v-slot:activator="{ on }" #6866
이 Issue가 굉장히 참고가 되었습니다!
덕분에 모야 모야 해소했습니다.

사이고에게

나름대로 해독하고 고찰해 보았습니다만,
납득할 수 있는 대답을 내놓은 것은 역시 상기의 Issue 덕분이라고 생각합니다.
그러나 영어의 해독력과 프레임워크의 구조 자체에 대한 이해에 자신이 없기 때문에,
자신 나름의 해석으로 설명한 것이기도 하고, 정확성이 부족한 부분이 있다고 생각합니다.
지적, 지도를 받으면 다행입니다.