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

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