Significado de v-slot: activator = “{on}”

Solución:

Probablemente se esté refiriendo a este ejemplo:

<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 siguiente línea declara un espacio con ámbito denominado activator, y se le proporciona un objeto de alcance (de VMenu), que contiene una propiedad denominada on:

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

Esto usa sintaxis de desestructuración en el objeto de alcance, que IE no admite.

Para IE, tendrías que eliminar la referencia on desde el objeto de alcance en sí:

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

Pero el ideal La solución OMI es utilizar un proyecto generado por Vue CLI, que incluye un ajuste preestablecido de Babel (@vue/babel-preset-app) para incluir automáticamente las transformaciones / polyfills necesarios para los navegadores de destino. En este caso, babel-plugin-transform-es2015-destructuring se aplicaría automáticamente durante la compilación.

Detalles sobre el activator espacio

VMenu permite a los usuarios especificar una plantilla ranurada llamada activator, que contiene componentes que activan / abren el menú en ciertos eventos (p. ej., click). VMenu proporciona oyentes para esos eventos a través de un objeto, pasado a la activator espacio:

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

El contenido de la ranura puede acceder VMenuA los oyentes de eventos les gusta esto:

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

Para mejorar la legibilidad, los datos con ámbito también se pueden desestructurar en la plantilla:

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

Los escuchas del objeto de alcance se pasan al <button> con v-onla sintaxis del objeto, que une uno o más pares de evento / escucha al elemento. Por este valor de on:

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

… el controlador de clic del botón está vinculado a un VMenu método.

Creo que la pregunta original es sobre la comprensión del objeto “on”. Se explica mejor aquí:

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

Esencialmente “on” es un accesorio pasado del activador. Lo que hace v-on = “on” es vincular eso en prop al componente. “on” en sí mismo son todos los oyentes de eventos pasados ​​desde el activador.

Para llamar a un consejo de legibilidad, es posible usar esta sintaxis:

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

En mi cerebro, esto tiene una legibilidad más fluida que v-on="on", que para mí es como observar una conversación que consiste únicamente en:

• Persona 1: “Oye”
• Persona 2: “Sí”

¿Comprender? 😉

Por cierto, activationEvents podría ser cualquier alias, como “slotEvents”, “oyentes”, “anyOldEvent”, o lo que tenga más sentido para el lector como un cambio de nombre del misterioso on.

---

---

Utiliza Nuestro Buscador