javascript - 嵌套激活中的 "..."实际上是如何工作的？ (验证)

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://v2.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 的工作方式完全相同。