Javascript Vuejs将道具从对象传递到动态组件

我正在制作一个仪表板应用程序，有人可以在其中以任何顺序向仪表板添加任何小部件。这一切都在起作用，但我正试图消除一些技术债务并清理干净

为了简单起见，假设一个仪表板可以有两个小部件：时钟和天气。这些小部件需要仪表板记录中的一些数据。小部件可以在页面上以任何顺序排列

我把他们也包括在内

资料{ 返回{ widget1:'时钟'， widget2:‘天气’， widgetData：{ 天气：{ 长：“12.23.34”， 拉丁语：“23.34.45” }, 时钟：{ 时间格式：“24小时”， 日期格式：“美国” } } }

---

} 如果您乐于硬编码数字：

:widgetData="widgetData[widget1]"

---

依此类推

您可以尝试使用一个函数，获取小部件类型并返回所需的数据

:widgetData="getWidgetData(this.widget1)"

---

如果您的存储变得比数组更复杂，这将特别有用。

因此，如果是我，我会重新构造一些东西。我将实际使用您创建的对象，而不是为每个组件显式调用小部件组件。鉴于：

data () {
    return {
      widgetData: {
        Weather: {
          long: '12.23.34',
          lat: '23.34.45'
        },
        Clock: {
          timeFormat: '24Hour',
          dateFormat: 'US'
         }
      }
    }
}

因此，键与小部件类型相同，数据就是值。所以你可以这样做：

<div v-for="(value, key) in widgetData">
  <component :is="key" :widgetData="value" />
</div>

在这种情况下，组件绑定如下所示：

<component v-for="widget in widgetData" :is="widget.type" :widgetData="widget.data" />

---

它需要能够以任何顺序显示小部件。如果您每次都更改数据顺序，这将起作用。@whla好的，我将推动更新，谢谢您的帮助。是的，它们需要以任意顺序排列，并且有多个布局。一个布局可能有3个小部件，另一个可能有12个。小部件的位置是不可预测的，并且取决于用户放置它的位置。我对数据非常有限——我必须在仪表板记录中包含所有小部件道具。不是我想要的方式，但这是我正在处理的限制。也因为它是在一个网格中，一个v-for如果没有主要的hacking@YestheCia所有这些要求都应该成为问题，这看起来很有希望。我只构建了12个小部件，但我还有45个要构建。看起来这可以帮我省下很多技术债务。我将在明天进行测试，它工作得非常完美，允许我轻松地重构大约100行额外的代码

<component v-for="(value, key) in widgetData" :is="key" :widgetData="value" />

data () {
    return {
      widgetData: [
       { type: "Weather",
         data: {
          long: '12.23.34',
          lat: '23.34.45'
        },
        { type: "Clock",
          data: {
          timeFormat: '24Hour',
          dateFormat: 'US'
         }
      }
    ]
}

<component v-for="widget in widgetData" :is="widget.type" :widgetData="widget.data" />