Значение v-slot: activator = "{on}"

Глядя на пример кода Vuetify для v-toolbar, какова цель v-slot:activator="{ on }"? Например:

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

Насколько я вижу, on нигде не является определенной переменной, поэтому я не понимаю, как это работает. Когда я пробую это в своем проекте, Internet Explorer выдает ошибку на <template v-slot:activator="{ on }">, но если я удаляю это, страница отображается.

Ответ 1

Вы, вероятно, ссылаетесь на этот пример:

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

Следующая строка объявляет область слота с именем activator, и ей предоставляется объект области (из VMenu), который содержит свойство с именем on:

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

При этом используется деструктурирующий синтаксис для объекта области, который IE не поддерживает.

Для IE вы должны разыменовать on из самого объекта области видимости:

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

Но идеальным решением IMO является использование сгенерированного проекта Vue CLI, который включает в себя предустановку Babel (@vue/babel-preset-app) для автоматического включения преобразований/многогранников, необходимых для целевые браузеры. В этом случае babel-plugin-transform-es2015-destructuring будет автоматически применено во время сборки.

Подробная информация о слоте `activator`

VMenu позволяет пользователям указывать шаблон со слотами с именем activator, содержащий компонент (ы), которые активируют/открывают меню при определенных событиях (например, click). VMenu предоставляет прослушиватели для этих событий через объект, передаваемый в слот activator:

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

Содержимое слота может обращаться к прослушивателям событий VMenu следующим образом:

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

Для улучшения читаемости данные области также могут быть деструктурированы в шаблоне:

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

Слушатели из объекта области передаются в <button> с синтаксисом объекта v-on, который связывает одну или несколько пар событие/слушатель с элементом. Для этого значения on:

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

... обработчик нажатия кнопки привязан к методу VMenu.

Ответ 1

Подробная информация о слоте activator

Подробная информация о слоте `activator`