Vue.js：以编程方式实例化功能组件答案

【问题标题】：Vue.js: instantiate functional component programmaticallyVue.js：以编程方式实例化功能组件
【发布时间】：2018-12-20 12:20:59
【问题描述】：

当我使用此代码实例化功能组件时

const Component_Constructor = Vue.extend(Component);
let component_instance = new Component_Constructor();
component_instance.$mount();

组件在render 函数上获得未定义的context 参数

如何将参数（props、slots、children...）传递给组件？

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

到目前为止，我发现的唯一解决方法是将 functional 组件包装到另一个普通组件中，如下所示：

let AComponent = {
    functional: true,
    name: 'a-component',
    render(h, context) {
        return h('div', context.children[0].text);
    }
};
let template = `<a-component>test content</a-component>`;
let WrapperComponent = Vue.extend({
    components: {AComponent},
    template,
});
let componentInstance = new WrapperComponent().$mount();
let content = componentInstance.$el;

【讨论】：

这不是完全违背了使用功能组件的目的吗？

【解决方案2】：

正如vuejs核心团队之一https://forum.vuejs.org/t/functional-component-with-vue-extend/40752所说，你不能手动挂载功能组件。

$mount() 需要一个 vue 实例，这是一个功能组件所没有的。

【讨论】：