v-slot：activator =“ {在}上”的含义

查看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时，Internet Explorer会引发错误<template v-slot:activator="{ on }">，但如果将其删除，则会呈现页面。

您可能会参考以下示例：

<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>withv-on的对象语法，该语法将一个或多个事件/侦听器对绑定到该元素。对于此值on：

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

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

我认为最初的问题是关于理解“ on”对象的。最好在这里解释：

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

本质上，“ on”是从激活器传入的道具。v-on =“ on”的作用是将prop上的内容绑定到组件。“ on”本身就是从激活器传递的所有事件侦听器。

要唤起可读性提示，可以使用以下语法：

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

在我的大脑中v-on="on"，它比拥有更流畅的可读性，对我而言，这就像观察一个仅包含以下内容的对话一样：

• 人1：“嘿”
• 人2：“是”

理解？;）

顺便说一句，activationEvents可以是任何别名，例如“ slotEvents”，“ listeners”，“ anyOldEvent”，或任何对读者来说更有意义的名称，都可以重命名神秘之物on。