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

Question

在https://vuetifyjs.com/en/components/toolbars#toolbar处查看示例代码，on的目的是什么？例如：

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

据我所知，{{1}}在任何地方都不是定义的变量，因此我看不到它是如何工作的。在我的项目中尝试使用Internet Explorer时，Internet Explorer会在{{1}}上引发错误，但是如果我删除它，页面就会呈现。

感谢您的帮助！

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的{​​{3}}，并为它提供了一个范围对象（来自VMenu），该对象包含名为on的属性：

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

这在范围对象scoped slot上使用了destructuring syntax。

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

<template v-slot:activator="scope">
  <v-toolbar-title v-on="scope.on">

但是IMO的理想解决方案是使用IE does not support生成的项目，其中包括Babel预设（Vue CLI），以自动包含{ {3}}个浏览器。在这种情况下，@vue/babel-preset-app将在构建期间自动应用。

activator插槽上的详细信息

target允许用户指定名为activator的带槽模板，其中包含在某些事件（例如click）下激活/打开菜单的组件。 VMenu为传递到activator插槽的事件babel-plugin-transform-es2015-destructuring提供侦听器：

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

为了提高可读性，作用域数据也可以在模板中为VMenu：

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

使用via an object的对象语法将范围对象的侦听器传递到<button>，该语法将一个或多个事件/侦听器对绑定到该元素。对于on的值：

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

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

Answer 2

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

jsfiddle

基本上“开”是从激活器传入的道具。 v-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可以是任何alias，例如“ slotEvents”，“ listeners”，“ anyOldEvent”，或者对读者来说更有意义的是重命名神秘的{{ 1}}。

Answer 4

运行下面的代码，你就会知道什么是 v-menu 中的 'attrs' 和 'on'。

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

结果：

v-menu slot activator:
attrs == {"role":"button","aria-haspopup":true,"aria-expanded":"false"}
on == {
click:function (e) {if (_this.openOnClick) {onClick && onClick(e);}_this.absoluteX = e.clientX;_this.absoluteY = e.clientY;},
keydown:function () { [native code] }
}

说明：

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

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

从 vue 2.4.0+ 开始，v-on 也支持绑定到一个不带参数的 event/listener 对的对象。请注意，使用对象语法时，它不支持任何修饰符。 示例：

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

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

正如 vuetify 文档所说：

Template caveat

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

<!-- Vue Component -->
<template v-slot:items="props">
  <td>{‌{ props.item.name }‌}</td>
</template>