Slot property of data object doesn't work in a render function's createElement()

[avxkim]

Version

2.6.11

Reproduction link

https://codesandbox.io/s/vigilant-diffie-shhg8?file=/src/components/Wrapper.js

Steps to reproduce

1. Create 2 functional components without templates, use render functions.
2. In a Button.js create a component with slot named "icon"
3. In a Wrapper.js create a component with the Button component we created earlier, and use slot property in order to place contents of wrapper inside an "icon" slot of the button component.

What is expected?

Contents must be rendered inside a named slot

What is actually happening?

Contents not being displayed in a named slot

[posva]

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow.

---

slot is for the parent: https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth

You need to do something like

export default {
  name: "Wrapper",
  functional: true,
  render(h) {
    return h(Button, { scopedSlots: {
      icon: () => h('span', {}, 'its from wrapper')
    } });
  }
};

export default {
  name: "Button",
  functional: true,
  render(createElement, { scopedSlots }) {
    return createElement("button", {}, scopedSlots.icon());
  }
};

[avxkim]

Thanks, for the quick reply, but i still don't understand the purpose of slot, could you throw an example with it? Why scopedSlots in my case would do a job? Isn't they are used when you pass some data?

[SamirGuo]

There is a problem with this solution. Because scopedSlots will always call the render function to generate a new vnode every time when you getting vnode. So no matter when you get the vnode, the vnode.elm is undefined