javascript - Vuejs 将 Prop 从对象传递到动态组件

Question

我正在制作一个仪表板应用程序，人们可以在其中以任何顺序将任何小部件添加到他们的仪表板。一切正常，但我正试图消除一些技术债务并进行清理。

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

我像这样包括它们。

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

然后在 HTML 中

<component v-bind:is="this.widget1" :widgetData="widgetData"></component>

<component v-bind:is="this.widget2" :widgetData="widgetData"></component>

现在我要做的是

<!-- if this.widget1 is Clock then :widgetData should equals widgetData.Clock -->

<component v-bind:is="this.widget1" :widgetData="widgetData.this.widget1"></component>

<!-- if this.widget2 is Weather then :widgetData should equals widgetData.Weather -->

<component v-bind:is="this.widget2" :widgetData="widgetData.this.widget2"></component>

这样 this.widget1 将填充 :is 并向下钻取到 :widgetData 对象，这样我就不会将整个对象传递给每个组件

我的示例只考虑了 2 个小部件，但实际上一个简单的仪表板最多可以有 9 个。

我已经尝试了几乎所有的事情，例如

:widgetData="widgetData.{{this.widget1}}"
:widgetData="widgetData.${this.widget1}"

等

有什么想法吗？

Answer 1

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

:widgetData="getWidgetData(this.widget1)"

...

method: {
  getWidgetData(widgetType) {
    if (widgetType == "Clock") {
      return clockData;
    }
    if (widgetType == "Weather") {
      return weatherData;
    }
  }
}

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