意外と難しい、Vuetifyのv-slot=activator="{ on }"についての簡単な解説

[
一部のVuetifyのコンポーネントでは、Vueのスロットの機能を利用します。
これが意外と複雑ですので、解説します。

内容としては、Vueの名前付きスロットとスコープ付きスロットになります。

例えば、v-menuコンポーネントの使い方は下のようになります。

<v-menu>
  <template v-slot:activator="{ on }">
    <v-btn v-on="on">
      メニューを開く
    </v-btn>
  </template>
  <v-list>
    <v-list-item>
      メニューの項目1
    </v-list-item>
  </v-list>
</v-menu>

v-on="on"を指定したHTML要素をクリックすると、v-listの部分が表示されます。

ここではVueの名前付きスロット機能と、スコープ付きスロットの両方を使用しています。

このコードの中で、普段あまり使わない文法は

<template v-slot:activator="{ on }">

の部分だと思います。

これは、この<template>がactivatorというnameに対するスロットであることを指定しています。
また、スロットプロパティとして、デフォルトスロットを表示するためのイベントハンドラを受け取っています。
そのイベントハンドラは、スロットプロパティのうちonというキーで<v-menu>コンポーネントから渡されるため

<template v-slot:activator="{ on }">

となるのです。

詳しく知りたい方は、スロットについてのVue公式ドキュメントを全部読むことをおすすめします。
https://jp.vuejs.org/v2/guide/components-slots.html

終わりに

私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話