[解決済み] v-slot:activator="{ on }" の意味。

質問

を見ると の Vuetify のサンプルコードを見ると v-toolbar の目的は何でしょうか？ v-slot:activator="{ on }" ? 例えば

<template v-slot:activator="{ on }">
  <v-toolbar-title v-on="on">
    <span>All</span>
    <v-icon dark>arrow_drop_down</v-icon>
  </v-toolbar-title>
</template>

<script>
  export default {
    data: () => ({
      items: [
        'All', 'Family', 'Friends', 'Coworkers'
      ]
    })
  }
</script>

見ている限りでは on はどこにも定義された変数ではないので、これがどのように機能しているのかわかりません。私のプロジェクトでこれを試すと、Internet Explorer は <template v-slot:activator="{ on }"> でエラーが発生しますが、これを削除すると、ページが表示されます。

どのように解決するのですか？

この例を参考にしているのでしょう。

<v-toolbar color="grey darken-1" dark>
  <v-menu :nudge-width="100">
    <template v-slot:activator="{ on }">
      <v-toolbar-title v-on="on">
        <span>All</span>
        <v-icon dark>arrow_drop_down</v-icon>
      </v-toolbar-title>
    </template>

    ...
  </v-menu>
</v-toolbar>

次の行は スコープ付きスロット という名前の activator というスコープオブジェクトが提供され、( VMenu という名前のプロパティが含まれる) スコープオブジェクトが提供されます。 on :

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

これは 構造化構文 をスコープオブジェクトに適用し、その は IE ではサポートされていません。 .

IE の場合は、デレファレンスとして on をスコープオブジェクト自体から参照する必要があります。

<template v-slot:activator="scope">
  <v-toolbar-title v-on="scope.on">

しかし 理想的 を使用することです。 Vue CLI を生成したプロジェクトで、Babel プリセット ( @vue/babel-preset-app ) が含まれており、自動的に ターゲット ブラウザに必要なトランスフォームやポリフィルを自動的に含めることができます。この場合 babel-plugin-transform-es2015-destructuring はビルド中に自動的に適用されるでしょう。

の詳細については activator スロット

VMenu という名前のスロット付きテンプレートを指定することができます。 activator という名前の、特定のイベント時にメニューを起動したり開いたりするコンポーネントを含むスロットテンプレートを指定できます (例, click ). VMenu はそれらのイベントのリスナーを提供します オブジェクトを経由して に渡されます。 activator スロットに渡されます。

<v-menu>
  <template v-slot:activator="scopeDataFromVMenu">
    <!-- slot content goes here -->
  </template>
</v-menu>

スロットのコンテンツがアクセスできる VMenu のイベントリスナーにアクセスできます。

<v-menu>
  <template v-slot:activator="scopeDataFromVMenu">
    <button v-on="scopeDataFromVMenu.on">Click</button>
  </template>
</v-menu>

可読性を高めるために、スコープされたデータは以下のようにすることもできます。 構造化解除 をテンプレートに含めることができます。

<!-- equivalent to above -->
<v-menu>
  <template v-slot:activator="{ on }">
    <button v-on="on">Click</button>
  </template>
</v-menu>

スコープオブジェクトからリスナーを <button> と共に v-on のオブジェクト構文で、1つ以上のイベント/リスナーペアを要素にバインドします。この値に対して on :

{
  click: activatorClickHandler // activatorClickHandler is an internal VMenu mixin
}

...ボタンのクリックハンドラには VMenu メソッドにバインドされています。