Javascript 在渲染功能中使用动态Vue组件

我有一个Vue单页应用程序，需要使用不同的组件进行更新。用户应能够随时更改所使用的组件

为了实现这一点，我创建了一个对象，该对象为每个键返回与所需类型对应的Vue组件。这样，如果我有一个所需组件的名称（以及它的一些数据），我可以通过调用

myComponents[name]（data）

来获取该组件

在我的主应用程序中，我使用了一个包含所需组件键的数据对象，以及一个将这些键映射到对象的渲染函数，以接收所需组件。更新数据对象应更新映射到页面上的组件

var page = new Vue( {
    el: '#page',
    data: function() {
        return {
            page_content: [ { type: 'heading', data: 'lorem ipsum' },
                            { type: 'content', data: 'more lorem ipsum' } ]
        }
    },
    render: function( h ) {
        return h( 'div',
            { attrs: { id: 'page' } },
            this.page_content.map( p => myComponents[ p.type ]( p.data ) )
        )
    }
} )

问题是主渲染函数不添加组件。元素保留为空。为什么会这样

---

这是一个相当简单的应用程序，所以我想继续使用渲染函数而不是模板。

答案非常简单

我忘记了从返回的组件创建元素，只是将原始Vue组件直接放入内容数组中

我的主要渲染功能应该是：

render: function( h ) {
    return h( 'div',
        { attrs: { id: 'page' } },
        this.page_content.map( p => h( myComponents[ p.type ]( p.data ) ) )
    )
}

render: function( h ) {
    return h( 'div',
        { attrs: { id: 'page' } },
        this.page_content.map( p => h( myComponents[ p.type ]( p.data ) ) )
    )
}