来自列表或对象的Vue.js属性绑定

Question

我正在尝试使用Vue.js（2.3）。我对手动进行属性绑定感到满意，例如

Vue.component('my-component', {
    props: ['info'],
    computed: {
        type: function() { return info.type },
        classList: function() { return this.info.attributes.classList },
        id: function() { return this.info.attributes.id }
    }
    template: '<component :is="type" :class="classList" :id="id">{{ info.text }}</component>'
})

其中信息=

{
    text: 'Some text',
    type: 'h2',
    attributes: {
        classList: 'a string',
        id: 'another-string'
    }
}

这将输出以下内容：

<h2 class="a string" id="another-string">Some text</h2> 

但是，如果我想将所有属性绑定到我的attributes对象中，而不管它们是多少，例如我的信息可能看起来像这样：

{
    text: 'Some text',
    type: 'td'
    attributes: {
        classList: 'a string',
        id: 'another-string',
        colspan: '3',
        rowspan: '2',
        title: 'A string',
        ...
    }
}

如何绑定所有这些属性，而不必列出可能出现的所有可能属性？

Answer 1

v-bind接受一个对象作为它的参数，并将所有属性绑定到它们的值。

template: '<component :is="type" v-bind="info.attributes"></component>'