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

【问题标题】：How to pass slots to a programatically created vuejs component instance如何将插槽传递给以编程方式创建的 vuejs 组件实例
【发布时间】：2018-06-08 21:56:22
【问题描述】：

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

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

我到处搜索，不知道这是否可能。有什么指点吗？

【问题讨论】：

您是否考虑过使用scoped slots？您应该能够通过分配给slot-scope 的绑定转发子属性。

标签： vue.js vuejs2 vue-component

【解决方案1】：

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

【讨论】：

【解决方案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);

但这显然是未记录的，因此是值得怀疑的方法。如果有更好的方法可用，我不会将其标记为已回答。

【讨论】：