v-slot:activator=“{ on }"的含义 [英] Meaning of v-slot:activator="{ on }"

问题描述

查看 v-toolbar 的 Vuetify 示例代码，v-slot:activator="{ on }" 的目的是什么?例如:

Looking at the Vuetify example code for v-toolbar, what is the purpose of v-slot:activator="{ on }"? For example:

<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 }"> 上引发错误，但是如果我删除它，页面会呈现.

As far as I can see, on is not a defined variable anywhere, so I don't see how this is working. When I try it in my project, Internet Explorer throws an error on the <template v-slot:activator="{ on }">, but if I remove it, the page renders.

推荐答案

你可能指的是这个例子:

You're likely referring to this example:

<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 的属性:

The following line declares a scoped slot named activator, and it is provided a scope object (from VMenu), which contains a property named on:

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

这在范围对象上使用解构语法，IE 不支持.

This uses destructuring syntax on the scope object, which IE does not support.

对于 IE，您必须从范围对象本身取消引用 on:

For IE, you'd have to dereference on from the scope object itself:

<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 将在构建过程中自动应用.

But the ideal solution IMO is to use a Vue CLI generated project, which includes a Babel preset (@vue/babel-preset-app) to automatically include the transforms/polyfills needed for the target browsers. In this case, babel-plugin-transform-es2015-destructuring would be automatically applied during the build.

VMenu 允许用户指定一个名为activator，包含根据特定事件(例如，click)激活/打开菜单的组件.VMenu 为这些事件提供监听器 通过一个对象，传递给 activator 槽:

VMenu allows users to specify a slotted template named activator, containing component(s) that activate/open the menu upon certain events (e.g., click). VMenu provides listeners for those events via an object, passed to the activator slot:

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

槽内容可以像这样访问VMenu的事件监听器:

The slot content can access VMenu's event listeners like this:

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

为了提高可读性，作用域数据也可以解构 在模板中:

For improved readability, the scoped data can also be destructured in the template:

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

来自作用域对象的侦听器通过 v-on 的对象语法，它将一个或多个事件/侦听器对绑定到元素.对于 on 的这个值:

The listeners from the scope object are passed to the <button> with v-on's object syntax, which binds one or more event/listener pairs to the element. For this value of on:

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

...按钮的点击处理程序绑定到一个 VMenu 方法.

...the button's click handler is bound to a VMenu method.

这篇关于v-slot:activator=“{ on }"的含义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！