web-dev-qa-db-fra.com

Signification de v-slot: activator = "{on}"

En regardant le exemple de code Vuetify pour v-toolbar , quel est le but de v-slot:activator="{ on }"? Par exemple:

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

Pour autant que je sache, on n'est une variable définie nulle part, donc je ne vois pas comment cela fonctionne. Lorsque je l'essaye dans mon projet, Internet Explorer génère une erreur sur le <template v-slot:activator="{ on }">, mais si je le supprime, la page s'affiche.

vue.jsvuejs2vuetify.js
44
Araw

Vous faites probablement référence à cet exemple:

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

La ligne suivante déclare un emplacement de portée nommé activator, et il est fourni un objet scope (de VMenu), qui contient une propriété nommée on :

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

Cela utilise syntaxe de déstructuration sur l'objet scope, qui IE ne prend pas en charge .

Pour IE, vous devez déréférencer on de l'objet scope lui-même:

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

Mais la solution idéale IMO consiste à utiliser un projet généré par Vue CLI , qui inclut un préréglage Babel ( @vue/babel-preset-app ) pour inclure automatiquement les transformations/polyfills nécessaires pour les navigateurs cible . Dans ce cas, babel-plugin-transform-es2015-destructuring serait automatiquement appliqué lors de la génération.

Détails sur l'emplacement activator

VMenu permet aux utilisateurs de spécifier un modèle à fente nommé activator, contenant des composants qui activent/ouvrent le menu lors de certains événements (par exemple, click). VMenu fournit des écouteurs pour ces événements via un objet , passés à l'emplacement activator:

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

Le contenu de l'emplacement peut accéder aux écouteurs d'événements de VMenu comme ceci:

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

Pour une meilleure lisibilité, les données de portée peuvent également être déstructurées dans le modèle:

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

Les écouteurs de l'objet scope sont passés à <button> avec v-on la syntaxe de l'objet, qui lie une ou plusieurs paires événement/écouteur à l'élément. Pour cette valeur de on:

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

... le gestionnaire de clic du bouton est lié à une méthode VMenu.

72
tony19

Je pense que la question d'origine est de comprendre l'objet "on". Il est mieux expliqué ici:

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

Essentiellement "on" est un accessoire transmis par l'activateur. Ce que v-on = "on" fait est de lier cela sur prop au composant. "on" lui-même est l'ensemble des écouteurs d'événement transmis par l'activateur.

0
PropertyWebBuilder