Question

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

为实现这一目标，我创建了一个对象，该对象针对每个键返回对应于所需类型的Vue组件。这样，如果我有一个必需组件的名称（以及它的一些数据），则可以通过调用myComponents[name](data)来获取该组件。

myComponents = {
    heading: ( data ) => Vue.component( 'heading', {
        ... // use data
        render: function() {
            ...
        }
    } ),
    content: ( data ) => Vue.component( 'content', {
        ...
    } )
    // and more of the same
}

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

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

问题在于主渲染功能未添加组件。元素留为空白。为什么会这样？

这是一个相当简单的应用程序，因此我想继续使用渲染功能而不是模板。

Answer 1

答案很简单。

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

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

//V Guide
var vGuide = d3.select("svg")
    .append("g")
    .vAxis(vGuide) // how could a selection have a method call "vAxis"

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

1 个答案: