请问小程序怎么动态加载组件?

Question

我有一组组件的数据，每一项包含组件名称componentName。我想通过遍历获取组件名称动态生成组件，伪代码如下。请问在小程序中该如何实现？

index.js

data: [
      {componentName: "component-1", value: "test"},
      {componentName: "component-2", value: "test1"},
      {componentName: "component-3", value: "test"},
    ]

index.wxml

  <block wx:for="{{data}}">
      <{{item.componentName}} info="{{item.value}}" />
  </block

更新

用 wx:if 控制显影可实现动态加载组件。

index.wxml

  <block wx:for="{{data}}">
      <component-1 wx:if="{{item.componentName === 'component-1'}}" />
      <component-2 wx:if="{{item.componentName === 'component-2'}}" />
      <component-3 wx:if="{{item.componentName === 'component-3'}}" />
  </block

Answer 1

不太建议。
小程序引入组件，首先是需要定义usingComponents。
如果这些个组件相差不大，可以写到一个组件里，通过type区分各个样式。

---

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。