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

Posted 2023-02-22

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

【英文标题】：How is the "..." in nested activation actually working? (Vuetify)

【发布时间】：2020-04-13 09:35:05

【问题描述】：

在嵌套激活的东西中，我们有这个：

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 不要提及任何关于“...”的内容。

... 在这种情况下的真正含义是什么？

【问题讨论】：

它解压对象中的任何内容。将其视为通过将对象的嵌套级别降低 1 来展平对象。

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

【讨论】：

谢谢！看起来扩展语法对于 ES6 来说是“新的”。 codeburst.io/javascript-es6-the-spread-syntax-f5c35525f754