Include data in render function

Hi!
I’m trying to pass the context data to a render function as you do in functional components:

export default {
  render: function (createElement, context) {
    return createElement(
      context.props.tagName, {
        ...context.data,
      }, context.children)
  },
  props: {
    tagName: {
      type: String,
      default: 'div'
    },
  }
}
export default {
  render: function (createElement) {
    return createElement(
      this.tagName, {
        // ...this.$data maybe?
      }, this.$slots.default)
  },
  props: {
    tagName: {
      type: String,
      default: 'div'
    },
  }
}

Running example:

<my-cmp tagName="transition-group" tag="ul" > .. </my-cmp>

With the functional component this works because of ``` …context.data``.
How to handle the same in not functional components?

The context for functional components exists only because functional components don’t have an instance.

In normal components, you would simply use this to access all component properties that you want to access.

You would have to build that data object (which is not this.$data) yourself - its interface is explained in the guide on the pages about render functions.

Sorry for deleted post, this is a BIN but unfortunately it’s not working :frowning:

Ok I saw just now your edit reply, but check this bin : how can I do the same result of functional component?

You are essentially trying to create something like a HOC (Higher-Order-Component) which has a couple of pitfalls in vue.

Since the child component you want to render expects sperecific props, which are only defined as attrbiutes on the parent, you have to split the atttributes of the parent into attrs and props for the child:

JackMellis crestred a nice little package for this that can make this kind of stuff easier: https://github.com/jackmellis/vue-hoc

Thank you!

Yes I know that. :confused: Clever solution.
Just for info: why with functional component works?

Hm, actually … I just tried it out with just passing on $attrs and that works as well:

It seems I was overthinking this. :smile:

Wow awesome!

Thank you so much :smiley: