Not able to recursive pass scopedSlots in recursive component.

[leyiang]

1. I'm building a tree component
2. I want it to have a scoped slot for future reuse.
3. To do that, I will have to pass the slot defined by user to tree-children recursively.

Problem: The template only gets compiled once. Recursively pass slot is not possible because the _ctx will always be the first level tree instance context.

// The compiled template code from vue
(function anonymous(
) {
const _Vue = Vue

return function render(_ctx, _cache) {
  with (_ctx) {
    const { toDisplayString: _toDisplayString, createElementVNode: _createElementVNode, resolveComponent: _resolveComponent, withCtx: _withCtx, openBlock: _openBlock, createBlock: _createBlock } = _Vue

    const _component_a_tree = _resolveComponent("a-tree")

    return (_openBlock(), _createBlock(_component_a_tree, { info: info }, {
      summary: _withCtx(() => [
        _createElementVNode("div", null, _toDisplayString(info.name), 1 /* TEXT */)
      ]),
      _: 1 /* STABLE */
    }, 8 /* PROPS */, ["info"]))
  }
}
})

I have it reproduced here

Questioin 1: Is there any workaround for this?
Questioin 1: Is this a bug?

[edison1105]

is this what you want?

[leyiang]

Well, actually no. I modified your code to show the problem, I would like to have all recursive tree-item to use the slot defined by user.

Maybe it's useless, but I just want to know if it is possible. I checked the code, the slot only got compiled once. So even though I use render function to pass different data to the slot, the render result will be the same.

[edison1105]

I think I get your point. It's easy to get it to work using the render function. see render function demo and dynamic component demo

[leyiang]

Amazing! Thanks!

[edison1105]

<template>
  <div class="tree">
    <slot name="summary" :node="node">
      <span>{{ node.name }}</span>
    </slot>

    <div class="children">
      <Comp v-for="child in node.children" :node="child">
         <template v-slot:summary="data">
		        <component :is="$slots.summary(data)[0]" /> // also works
        </template>
      </Comp>
    </div>
  </div>
</template>

<script>
export default {
  props: ['node'],
};
</script>