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

Question

Глядя на пример кода здесь https://vuetifyjs.com/en/components/toolbars#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 }">, но если я удаляю ее, страница отображается.

Спасибо за любую помощь!

Answer 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 *1022* является использование сгенерированного проекта Vue CLI , который включает предустановку Babel (@vue/babel-preset-app) для автоматического включения преобразований. / polyfills, необходимые для браузеров target . В этом случае 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 методу.