v-slot 的含义：activator="{ on }"

Question

查看 --- 的 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 }"> 上抛出一个错误，但如果我删除它，页面就会呈现。

原文由 Araw 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 是使用 Vue CLI 生成的项目，其中包括 Babel 预设 ( @vue/babel-preset-app ) 以自动包含 目标 浏览器所需的转换/polyfill。在这种情况下， 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>

slot 内容可以像这样访问 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>

范围对象中的侦听器通过 v-on 的对象语法传递给 <button> ，该语法将一个或多个事件/侦听器对绑定到元素。对于 on 的这个值：

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

…按钮的单击处理程序绑定到 VMenu 方法。

原文由 tony19 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

原文由 PropertyWebBuilder 发布，翻译遵循 CC BY-SA 4.0 许可协议