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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 如何将动态道具绑定到VueJS 2中的动态组件，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1308字，纯文字阅读大概需要2分钟。

内容图文

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

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

在下面的示例中,item-one组件将接收带有item1.jpg值的image属性;并且第二项组件不会收到任何属性.

<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]”.

解决方法:

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

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

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

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

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>

内容总结

以上是互联网集市为您收集整理的javascript – 如何将动态道具绑定到VueJS 2中的动态组件全部内容，希望文章能够帮你解决javascript – 如何将动态道具绑定到VueJS 2中的动态组件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---