如何将动态道具绑定到VueJS 2中的动态组件

Question

我想知道如何迭代组件名称列表(来自对API服务器的AJAX调用)并将它们呈现为组件,并将相关属性传递给每个组件(即动态绑定它们的属性).

到目前为止,我已设法迭代表示组件的JSON项列表,并成功呈现这些组件.我现在要做的是使用绑定每个组件的属性v-bind.

在下面的示例中,item-one组件将image使用item1.jpg值接收属性; 并且item-two组件不会收到任何属性.

<template>
  <div v-for="item in items">
    <component :is="Object.keys(item)[0]" :v-bind="???"></component>
  </div>
</template>

<script>
  import ItemOne from '../components/item-one'
  import ItemTwo from '../components/item-two'

  export default {
    components: {
      ItemOne,
      ItemTwo
    },
    asyncData () {
      return {
        items: [
          { 'item-one': { 'image': 'item1.jpg' } },
          { 'item-two': { } }
        ]
      }
    }
  }
</script>

我尝试使用:v-bind="Object.values(Object.keys(item)[0])"但是我v-bind="[object Object]"在渲染元素中获取了属性.

Answer 1

首先,你需要摆脱结肠v-bind.v-bind在为属性添加前缀时,冒号是一个简写.但是,在传递密钥对的对象时,只需使用该v-bind指令即可.

其次,您没有正确引用每个项目的属性.你可以像这样引用它们:

v-bind="item[Object.keys(item)[0]]"

Object.keys如果您items稍微更改了属性的结构,则不需要使用:

items: [{ 
  type: 'item-one', 
  props: { 'image': 'item1.jpg' },
}, {
  type: 'item-two',
}]

这样,通过事先明确标记组件类型和属性,您的模板将更容易理解:

<div v-for="item in items">
  <component :is="item.type" v-bind="item.props"></component>
</div>