Vue.js 如何将插槽传递给以编程方式创建的vuejs组件实例

我的应用程序需要创建动态组件实例，为此我使用以下方法：

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

所有这些都很好，我也能通过道具。但现在我也需要将插槽传递给该实例。我尝试过一些不成功的事情，比如：

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

---

我到处都找遍了，不知道这是否可能。任何指针？

可以通过操作

$Slots

键在创建的实例上设置插槽：

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

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

instance.$mount('#el');

从

我查看了

Vue.js

的TypeScript定义文件，在Vue组件实例上发现了一个未记录的函数：

$createElement（）

。我的猜测是，它是传递给组件的

render（createElement）

函数的同一个函数。因此，我可以通过以下方式解决：

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);

但这显然是没有文件记录的，因此值得怀疑。如果有更好的方法可供选择，我将不会对其进行标记。

您是否考虑过使用？您应该能够通过分配给

插槽范围的绑定转发子属性。