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, on
handelt 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.
vue.js
vuejs2
vuetify.js
Araw
quelle
quelle
Antworten:
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 (vonVMenu
) bereitgestellt , das eine Eigenschaft mit dem Namen enthälton
:<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
on
vom 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 wirdbabel-plugin-transform-es2015-destructuring
automatisch während des Builds angewendet.Details zum
activator
SteckplatzVMenu
Ermöglicht Benutzern die Angabe einer geschlitzten Vorlage mit dem Namenactivator
Komponenten, die das Menü bei bestimmten Ereignissen aktivieren / öffnen (zclick
. B. ).VMenu
stellt Listener für diese Ereignisse über ein Objekt bereit , das an denactivator
Steckplatz übergeben wird:<v-menu> <template v-slot:activator="scopeDataFromVMenu"> <!-- slot content goes here --> </template> </v-menu>
Der Slot-Inhalt kann
VMenu
wie 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 übergebenv-on
, die ein oder mehrere Ereignis / Listener-Paare an das Element bindet. Für diesen Wert vonon
:{ click: activatorClickHandler // activatorClickHandler is an internal VMenu mixin }
... der Klick-Handler der Schaltfläche an eine
VMenu
Methode gebunden ist .quelle
on
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.
quelle
Um einen Lesbarkeitstipp aufzurufen, können Sie die folgende Syntax verwenden:
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:Verstehen? ;)
Übrigens
activationEvents
kö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 iston
.quelle