代码之家 › 专栏 › 技术社区 › Kushagra Gour

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

vue-component vuejs2 vue.js

3

Kushagra Gour · 技术社区 · 8 年前

我的应用程序需要创建动态组件实例,我正在使用以下方法:

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

我到处都找遍了,不知道这是否可能。有什么指示吗?

2 回复 | 直到 8 年前

1

4

Lukas 7 年前

从…起 How to create Vue.js slot programatically?

我查看了 Vue.js 我在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);

但这显然是没有记录的,因此值得怀疑。如果有更好的方法可用,我不会标记它的答案。

2

ArnoHolo bcoughlan 6 年前

可以通过操纵 $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');