嵌套激活中的“...”实际上是如何工作的？ (Vuetify)

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 了解替代示例

似乎需要...。这就是“解构和重组”的方法。即Using v-tooltip inside v-menu activator in vuetify 2.0

这里的文档 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 }

这只是这个的简写：

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

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

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