Question

我的应用需要创建动态组件实例，我正在使用以下方法：

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

我到处搜索，如果可能的话，我也不知道。有什么指针吗？

Answer 1

可以通过操作actorFor(KafkaPublisher.props[MeterData], "meter-data-actor")键：

在创建的实例上设置插槽

$slots

Answer 2

来自How to create Vue.js slot programatically?

我查看了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);

但这显然是无证的，因此是有问题的方法。如果有更好的方法，我不会将其标记为已回答。

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

2 个答案: