嵌套激活中的“...”实际上是如何工作的？ （验证）

Question

在嵌套激活中我们有这个：

v-on="{ ...tooltip, ...menu }"> 不是 v-on="{ tooltip, menu }">

即：

<template>

  <v-tooltip>

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

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

          <v-btn  v-on="{ ...tooltip, ...menu }">
          </v-btn>
        </template>

          <v-card>

          </v-card>

        </v-menu>
    </template>

       {{ tooltip_message }}

    </v-tooltip>

</template>

参见 https://vuetifyjs.com/en/getting-started/releases-and-migrations 替代示例

似乎需要 ...。这就是“Destructure and "restructure"”的方法。即

文档在这里 https://vuejs.org/v2/guide/components-slots.html#Destructuring-Slot-Props 不要提任何关于“...”的事情。

... 在此上下文中的真正含义是什么？

Answer 1

首先，这是一个 JavaScript 结构，而不是 Vue 结构。

考虑以下内容，其中 tooltip 和 menu 都是对象：

const obj = { ...tooltip, ...menu }

这将创建一个新对象。 tooltip 的属性被复制，然后是 menu 的属性。最终结果是它将两个对象合并为一个新对象。来自 menu 的属性优先于来自 tooltip 的属性，如果它们共享相同的名称。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals

与此对比：

const obj = { tooltip, menu }

这只是一个 shorthand：

const obj = { tooltip: tooltip, menu: menu }

我们仍在创建一个新对象，但这次它只有两个属性，称为 tooltip 和 menu。原来的两个对象用作这些属性的值。

您示例中的 v-on 的工作方式完全相同。