Vuetify의 v-slot : activator 사용법

※v-slot의 구문은 Vue 2.6.0 이상부터 사용할 수 있습니다.

v-slot 사용 방법은 다음 공식 문서에 설명되어 있습니다.
htps : // jp. 아 js. rg/v2/구이데/코m포넨 ts-sぉts. HTML # % 3 % 82 % B9 % 3 % 82 % B3 % 3 % 83 % BC % 3 % 83 % 97 % 4 % b % 98 % 3 % 81 % 8D % 3 % 82 %B9%에3%83%아D%에3%83%83%에3%83%88

v-slot:activator란?

Vuetify에서 v-slot:activator라는 슬롯을 자주 볼 수 있습니다.
이것은 특정 조건시(클릭시·호버시만 등)만 팝업하는 경우 트리거용 슬롯으로 준비되어 있습니다.

TL;DR

activator 슬롯에 팝업을 부여하려는 요소를 설명합니다

디폴트 슬롯에는 팝업으로 표시하는 요소를 기술

@totto357씨로부터 코멘트란으로 보충해 주셨습니다. 감사합니다.

예

드롭다운 메뉴(v-menu)

htps : // ゔ에치 fyjs. 코 m / 엔 / 코 m 포넨 ts / 메누 s


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이 누군가라고 하면, 이벤트 핸들러와 같습니다.
※드롭다운에서는 클릭・툴팁에서는 호버 등.

컴포넌트마다 캡슐화되어 있으므로, 사용하는 측은 그대로 바인딩하는 것만으로 괜찮을 것 같네요.