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

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时，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解决方案是使用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方法。

Answer 2

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

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

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

Answer 3

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

<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.

Answer 4

运行下面的代码，你就会知道什么是v菜单中的“attrs”和“on”。

\n

<v-menu>\n    <template v-slot:activator="{ on, attrs }">\n        <div v-bind="attrs" v-on="on">\n            v-menu slot activator:\n            <br />\n            attrs == {{ JSON.stringify(attrs) }}\n            <br />\n            on == {{ \'{\' + Object.keys(on).map(k => k + " : " + on[k]).join(\',\') + \'}\' }}\n        </div>\n    </template>\n</v-menu>\n

\n

结果：

\n

v-menu slot activator:\nattrs == {"role":"button","aria-haspopup":true,"aria-expanded":"false"}\non == {\nclick:function (e) {if (_this.openOnClick) {onClick && onClick(e);}_this.absoluteX = e.clientX;_this.absoluteY = e.clientY;},\nkeydown:function () { [native code] }\n}\n

\n

解释：

\n

<div v-bind="attrs" v-on="on">等于

\n

<div \n    v-bind="{role:\'button\',aria-haspopup:true,aria-expanded:\'false\'}" \n    v-on="{click:function (e) {/*implement by v-menu*/},keydown:function () {/*implement by v-menu*/}}"\n>\n

\n

从 vue 2.4.0+ 开始，v-on 还支持绑定到不带参数的事件/监听器对的对象。请注意，使用对象语法时，它不支持任何修饰符。\n示例:

\n

<!-- v-on\'s object syntax (vue 2.4.0+) -->\n<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>\n

\n

关于<template>Internet Explorer 中的标签引发错误：

\n

正如 vuetify 文档所说：

\n

模板警告

\n

由于 Internet Explorer\xe2\x80\x99s 对<template>标记的支持有限，您必须将完全编译的 dom 元素发送到浏览器。这可以通过提前构建 Vue 代码或创建辅助组件来替换 dom 元素来完成。例如，如果直接发送到 IE，则会失败：

\n

<!-- Vue Component -->\n<template v-slot:items="props">\n  <td>{\xe2\x80\x8c{ props.item.name }\xe2\x80\x8c}</td>\n</template>\n

\n