Bedeutung von v-slot: activator = "{on}"

Mit Blick auf die Vuetify Beispielcode fürv-toolbar , was ist der Zweck v-slot:activator="{ on }"? Zum Beispiel:

<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>

Soweit ich sehen kann, onhandelt es sich nirgendwo um eine definierte Variable, daher sehe ich nicht, wie dies funktioniert. Wenn ich es in meinem Projekt versuche, gibt Internet Explorer einen Fehler auf dem aus <template v-slot:activator="{ on }">, aber wenn ich es entferne, wird die Seite gerendert.

Sie beziehen sich wahrscheinlich auf dieses Beispiel:

<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>

In der folgenden Zeile wird ein Bereichsbereich mit dem Namen deklariert activator, und es wird ein Bereichsobjekt (von VMenu) bereitgestellt , das eine Eigenschaft mit dem Namen enthält on:

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

Dies verwendet die Destrukturierungssyntax für das Bereichsobjekt, die der IE nicht unterstützt .

Für IE müssten Sie onvom Bereichsobjekt selbst dereferenzieren :

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

Aber die ideale Lösung IMO ist die Verwendung eines Vue CLI erzeugt Projekt, das ein Babel Preset enthält ( @vue/babel-preset-app) , um automatisch schließen die Transformationen / polyfills für die benötigten Ziel Browser. In diesem Fall wird babel-plugin-transform-es2015-destructuringautomatisch während des Builds angewendet.

Details zum activatorSteckplatz

VMenuErmöglicht Benutzern die Angabe einer geschlitzten Vorlage mit dem Namen activatorKomponenten, die das Menü bei bestimmten Ereignissen aktivieren / öffnen (z click. B. ). VMenustellt Listener für diese Ereignisse über ein Objekt bereit , das an den activatorSteckplatz übergeben wird:

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

Der Slot-Inhalt kann VMenuwie folgt auf die Ereignis-Listener zugreifen :

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

Zur besseren Lesbarkeit kann die scoped Daten auch sein destructured in der Vorlage:

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

Die Listener aus dem Bereichsobjekt werden an die Objektsyntax von <button>with übergeben v-on, die ein oder mehrere Ereignis / Listener-Paare an das Element bindet. Für diesen Wert von on:

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

... der Klick-Handler der Schaltfläche an eine VMenuMethode gebunden ist .

Ich denke, die ursprüngliche Frage betrifft das Verständnis des "Ein" -Objekts. Es wird am besten hier erklärt:

https://github.com/vuetifyjs/vuetify/issues/6866

Im Wesentlichen ist "Ein" eine vom Aktivator übergebene Requisite. Was v-on = "on" tut, ist, das on prop an die Komponente zu binden. "on" selbst sind alle Ereignis-Listener, die vom Aktivator übergeben wurden.

Um einen Lesbarkeitstipp aufzurufen, können Sie die folgende Syntax verwenden:

<v-menu>
    <template v-slot:activator="{ on: activationEvents }">
        <v-btn v-on="activationEvents">
            I like turtles 🐢
        </v-btn>
    </template>
</v-menu>

In meinem Gehirn hat dies eine flüssigere Lesbarkeit als v-on="on", was für mich wie das Beobachten eines Gesprächs ist, das ausschließlich aus Folgendem besteht:

• Person 1: "Hey"
• Person 2: "Ja"

Verstehen? ;)

Übrigens activationEventskönnte es sich um einen beliebigen Alias ​​handeln , wie "slotEvents", "listeners", "anyOldEvent" oder was auch immer für den Leser als Umbenennung des Geheimnisvollen sinnvoller ist on.