当将插槽视为作用域插槽时，为什么此激活器文本消失？

Question

Vuetify的v-list-group激活器文本在使用新的Vue语法将其视为作用域插槽时消失(<template v-slot:activator>与<template v-slot:activator="{on}">)。

为了简单起见，我派生了Vuetify示例Codepen并对其进行了简化。我已经设置了它，这样我就可以很容易地注释激活器来使用或不使用作用域插槽。仅使用v-slot:activator时，激活器文本肯定会显示出来。

这是我的Codepen链接：https://codepen.io/Made-of-Clay/pen/rNBzeaQ&editors=101

我派生的原始钢笔：https://codepen.io/pen/?&editable=true&editors=101 )

我找到这支笔的文档页面：https://vuetifyjs.com/en/components/lists#expansion-lists

我没有注意到错误或警告。我期望激活器文本在使用v-slot:activator="{on}"和v-on="on"时出现，正如文档所示。

Answer 1

将="{on}"放在最后会将插槽使用从普通插槽更改为作用域插槽。我不知道为什么您认为v-list-group的activator插槽可以用作作用域插槽，我在文档中没有发现它支持这一点。

如果我们看一下v-list-group的代码，我们会看到：

https://github.com/vuetifyjs/vuetify/blob/db84347f242fe73288b72c7e72a1af04b09c9434/packages/vuetify/src/components/VList/VListGroup.ts#L157

通过this.$slots.activator将activator作为普通插槽进行访问。只有当您使用普通插槽时，这才会起作用。

与其他组件形成对比，比如v-menu。v-menu组件也有一个activator插槽，但它支持将其用作普通插槽或作用域插槽。

https://github.com/vuetifyjs/vuetify/blob/db84347f242fe73288b72c7e72a1af04b09c9434/packages/vuetify/src/components/VMenu/VMenu.ts#L435

请注意这是如何显式引用this.$slots.activator和this.$scopedSlots.activator的。在这种情况下，这个插槽的实际包含发生在activatable混合中：

https://github.com/vuetifyjs/vuetify/blob/db84347f242fe73288b72c7e72a1af04b09c9434/packages/vuetify/src/mixins/activatable/index.ts#L82

您会注意到，这确实支持将on值传递给作用域插槽。这里使用了一个叫做getSlot的帮助器，它消除了普通插槽和作用域插槽之间的差异：

https://github.com/vuetifyjs/vuetify/blob/db84347f242fe73288b72c7e72a1af04b09c9434/packages/vuetify/src/util/helpers.ts#L477

所有这些都不适用于v-list-group，它只支持普通插槽。