Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vue.js: instantiate functional component programmatically

when I instantiate functional component using this code

const Component_Constructor = Vue.extend(Component);
let component_instance = new Component_Constructor();
component_instance.$mount();

the component gets undefined context argument on the render function

how can i pass parameters (props, slots, children, ...) to the component?

like image 859
Hamed Ehtesham Avatar asked Dec 20 '18 12:12

Hamed Ehtesham


1 Answers

the only workaround I found so far is to wrap the functional component into another normal component like this:

let AComponent = {
    functional: true,
    name: 'a-component',
    render(h, context) {
        return h('div', context.children[0].text);
    }
};
let template = `<a-component>test content</a-component>`;
let WrapperComponent = Vue.extend({
    components: {AComponent},
    template,
});
let componentInstance = new WrapperComponent().$mount();
let content = componentInstance.$el;
like image 174
Hamed Ehtesham Avatar answered Nov 14 '22 17:11

Hamed Ehtesham