为什么将插槽视为作用域插槽时此激活器文本会消失?
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-group
的 activator
插槽可以用作作用域插槽,我在文档中发现的任何内容都表明它支持此功能。
如果我们看一下 v-list-group
的代码,我们会看到:
activator
正在通过 this.$slots.activator
作为普通插槽访问。这仅在您使用普通插槽时有效。
将其与其他组件进行对比,例如 v-menu
。 v-menu
组件也有一个 activator
插槽,但它支持将其用作普通插槽或作用域插槽。
请注意这是如何明确引用 this.$slots.activator
和 this.$scopedSlots.activator
。在这种情况下,这个插槽的实际包含发生在 activatable
mixin:
您会注意到这确实支持将 on
值传递给作用域插槽。这里使用了一个名为 getSlot
的助手来消除普通插槽和作用域插槽之间的差异:
None适用于v-list-group
,仅支持普通插槽。
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-group
的 activator
插槽可以用作作用域插槽,我在文档中发现的任何内容都表明它支持此功能。
如果我们看一下 v-list-group
的代码,我们会看到:
activator
正在通过 this.$slots.activator
作为普通插槽访问。这仅在您使用普通插槽时有效。
将其与其他组件进行对比,例如 v-menu
。 v-menu
组件也有一个 activator
插槽,但它支持将其用作普通插槽或作用域插槽。
请注意这是如何明确引用 this.$slots.activator
和 this.$scopedSlots.activator
。在这种情况下,这个插槽的实际包含发生在 activatable
mixin:
您会注意到这确实支持将 on
值传递给作用域插槽。这里使用了一个名为 getSlot
的助手来消除普通插槽和作用域插槽之间的差异:
None适用于v-list-group
,仅支持普通插槽。