How is the "..." in nested activation actually working? (Vuetify)

Question

In a nested activation thing we have this:

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

ie:

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

See https://vuetifyjs.com/en/getting-started/releases-and-migrations for alternate example

The ... appears to be needed. This is the " Destructure and "restructure"" approach. ie Using v-tooltip inside v-menu activator in vuetify 2.0

The docs here https://v2.vuejs.org/v2/guide/components-slots.html#Destructuring-Slot-Props don't mention anything about "...".

What do the ... really mean in this context?

Answer 1

Firstly, this is a JavaScript construct, not a Vue construct.

Consider the following, where tooltip and menu are both objects:

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

This creates a new object. The properties of tooltip are copied across and then the properties of menu. The net result is that it merges the two objects into a new object. Properties from menu take precedence over those from tooltip if they share the same name.

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

Contrast that with this:

const obj = { tooltip, menu }

That would just be a shorthand for this:

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

We're still creating a new object but this time it just has two properties, called tooltip and menu. The original two objects are used as the values for those properties.

The v-on in your example works exactly the same way.