Does Scoped Slots support second parameter?
#14126
Replies: 1 comment
|
I believe what's happening here is that this isn't actually a second slot parameter. As far as I know, Vue scoped slots expose a single argument—the slot props object. The syntax #switcher-icon="node, { isLeaf }"looks more like a compiler extension (or library-specific transform) than standard Vue slot syntax. In standard JavaScript, destructuring would normally be written as: #switcher-icon="{ isLeaf }"or #switcher-icon="slotProps"followed by That would also explain why it works at runtime but TypeScript complains: the Vue language tools understand the standard slot-props contract (a single object), while this alternate syntax isn't part of what the type system expects. I'd also be interested to know whether this syntax is officially supported by Vue's template compiler, or if it's something introduced by Arco's tooling. |
Uh oh!
There was an error while loading. Please reload this page.
From Vue's best practices, I understand that scoped slots should typically receive a single parameter (an object) containing all the properties. In standard Vue implementations, when attributes are added to a element, they become properties of this first parameter.
However, while using Arco Design Vue, I've noticed cases where a second parameter is provided to scoped slots, and it works as expected:
https://arco.design/vue/en-US/component/tree#icons
However, when using TypeScript, calling the second parameter itself or its properties will trigger errors because TypeScript doesn't recognize them as coming from a scoped slot. Such as:
Property 'props' does not exist on type '{ treeData: any; logProps: (props: any) => void; $: ComponentInternalInstance; $data: {}; $props: {}; $attrs: Data; $refs: Data; $slots: Readonly<InternalSlots>; ... 14 more ...; _pStores?: Record<...> | undefined; }'. Did you mean '$props'?ts-plugin(2551)runtime-core.d.ts(491, 5): '$props' is declared here.The fact that the second parameter works at runtime while TypeScript throws errors has made me deeply curious about whether this pattern is actually valid in Vue.
Of course, if this issue should only be discussed in Arco Design's repository, I'm happy to delete this discussion.
All reactions