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

Why does this activator text disappear when treating slot as scoped slot?

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

为了简单起见,我分叉了 Vuetify 示例 Codepen 并将其剥离。我设置了它,以便我可以轻松地评论激活器以使用或不使用作用域插槽。仅使用 v-slot:activator.

时,激活器文本肯定会显示

这是我的 Codepen link: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" 时显示激活器文本,如文档所示。

="{on}" 放在末尾会将槽的使用从普通槽更改为作用域槽。我不确定为什么您认为 v-list-groupactivator 插槽可以用作作用域插槽,我在文档中发现的任何内容都表明它支持此功能。

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

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

activator 正在通过 this.$slots.activator 作为普通插槽访问。这仅在您使用普通插槽时有效。

将其与其他组件进行对比,例如 v-menuv-menu 组件也有一个 activator 插槽,但它支持将其用作普通插槽或作用域插槽。

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

请注意这是如何明确引用 this.$slots.activatorthis.$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

None适用于v-list-group,仅支持普通插槽。