[Vuejs]-Vue Js pass all context when wrapping components with functional components

by

0👍

✅

I solved the issue.
So it looks like the names of the properties in the data object
https://v2.vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth

Are different from the names of the properties in context:
https://v2.vuejs.org/v2/guide/render-function.html#Functional-Components

Maybe a suggestion for the future is to make them match, or create an utility that maps them allowing to pass them all at once like that.

This is useful in the context of hocs where you want to delegate the main functionality to the received component and you just want to change a few details and make them default.

Therefore, this is the correct return statement:

    return h(
      wrappedComponent(),
      {
        class: getExtendedClassName(),
        name: 'ExampleInput',
        componentName: 'ExampleInput',
        props: context.props,
        slots: context.slots(),
        scopedSlots: context.scopedSlots,
        data: context.data,
        parent: context.parent,
        on: context.listeners,
        inject: context.injections,
      },
      context.children
    );

Leave a comment