How to pass slots to a programatically created vuejs component instance

Question

My app requires creating dynamic component instances, for which I am using the following method:

import Button from 'Button.vue'
...
var Ctor = Vue.extend(Button);
var instance = new Ctor({ propsData: {} });
instance.$mount('#el');

All this works fine, I am able to pass props too. But now I need to pass slots to that instance too. I have tried random unsuccessful things like:

var instance = new Ctor({ propsData: {}, slots: { default: someNode }});

I have searched everywhere and have no clue if that is even possible or not. Any pointers?

Answer 1

From How to create Vue.js slot programatically?

I looked into TypeScript definition files of Vue.js and I found an undocumented function on Vue component instance: $createElement(). My guess is, it is the same function that is passed to render(createElement) function of the component. So, I am able to solve it as:

const Constr = Vue.extend(MyComponent);
const instance = new Constr({
    propsData: { someProp: 'My Heading' }
});

// Creating simple slot
const node = instance.$createElement('div', ['Hello']);
instance.$slots.default = [node];

instance.$mount(body);

But this is clearly undocumented and hence questionable approach. I will not mark it answered if there is some better approach available.

Answer 2

Slots can be set on the created instance by manipulating the $slots key:

import Button from 'Button.vue'
...
var ButtonConstructor = Vue.extend(Button);
var instance = new ButtonConstructor({ propsData: {} });

// SET SLOT
instance.$slots.default = [ 'Hello' ];

instance.$mount('#el');