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

Question

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

为了简单起见，我分叉了 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

activator 被作为普通插槽访问，通过this.$slots.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 mixin 中：

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，它只支持普通插槽。