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

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

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

本质上，“ on”是从激活器传入的道具。v-on =“ on”的作用是将prop上的内容绑定到组件。“ 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>with v-on的对象语法，该语法将一个或多个事件/侦听器对绑定到该元素。对于此值on：

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

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