Vue.js:以编程方式实例化功能组件

Ham*_*ham 6 vue.js vue-component vuejs2

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

const Component_Constructor = Vue.extend(Component);
let component_instance = new Component_Constructor();
component_instance.$mount();
Run Code Online (Sandbox Code Playgroud)

组件出现不确定的context 参数render函数

我如何将参数(道具、插槽、子项...)传递给组件?

Ham*_*ham 2

到目前为止,我发现的唯一解决方法是将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;
Run Code Online (Sandbox Code Playgroud)

  • 这不是完全违背了使用函数式组件的目的吗? (2认同)