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

74

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.

Araw
quelle
Mögliches Duplikat von Wie funktioniert 'Slot Activator' in vuetify?
Matheus Valenza

Antworten:

112

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 .

tony19
quelle
1
@ Tony19 sehr gute Erklärung! Ich möchte etwas hinzufügen, um den V-Slot mit Umfang und Namen in diesem Fall besser zu verstehen. Wenn Sie die Steckplatzvorlage im V-Menü hinzufügen, ist sie möglicherweise leicht zu erkennen. Nur ein Beispiel könnte sein: `` `<slot name =" activator "v-bind: on =" on "> // hier etwas Code ... </ slot>` `` Also v-slot: activator = "{ on} " on
übergibt
6

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.

PropertyWebBuilder
quelle
1

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.

Noah Stahl
quelle