用于组件的 Vue.js 接口

Question

我目前正在开发一个 vue.js 项目，我得到一个 json 响应，其结构如下：

"fields": 
    [
        {
            "type": "A",
            "propsA": "foo"
        },
        {
            "type": "A",
            "propsA": "foo"
        },
        {
            "type": "B",
            "propsB": "bar"
        },
        {
            "type": "C",
            "propsC": "bla"
        },
    ]

我的系统应该能够识别字段中的每种类型，然后针对它们的属性显示特定的显示。这应该通过为每种类型使用 Vue.js-Component 来完成。

经过一些研究，我遇到了以下问题：我想创建一种可以动态加载这些组件的方法；如果在我想要的响应中有一个带有"type": "C" ... 的新字段 只需能够编写一个新的组件“C”来说明它应该如何显示，然后像组件管理器这样的东西应该能够加载所述组件并将数据写入模板。

以前是否有人遇到过类似的挑战，并且愿意分享与我一起工作的方式？

Answer 1

希望这可以为可能的策略提供一些见解。我建议您在全局范围内（或在您认为将使用它们的任何地方）注册每个可能的组件，并使用 :is special attribute 动态加载组件。

一旦你注册了你的组件，你就可以遍历传入字段列表，将:is属性设置为类型，并将属性设置为所有其他传入信息。这将导致为正确的组件提供其相应的信息。

const A = {
  props: ['data'],
  template: `
    <div>
      <p>This is coming from the A component</p>
      <p>{{ data.text }}</p>
    </div>
  `
}

const B = {
  props: ['data'],
  template: `
    <div>
      <p>This is coming from the B component</p>
      <p>{{ data.text }}</p>
    </div>
  `
}

const C = {
  props: ['data'],
  template: `
    <div>
      <p>This is coming from the C component</p>
      <p>{{ data.text }}</p>
    </div>
  `
}

new Vue({
  el: "#app",
  components: {
    'A': A,
    'B': B,
    'C': C
  },
  data: {
    fields:  [{
      type: "A",
      data: {
        text: "This is coming from the A data!"
      }
    }, {
      type: "A",
      data: {
        text: "This is coming from the A data!"
      }
    }, {
      type: "B",
      data: {
        text: "This is coming from the B data!"
      }
    }, {
      type: "C",
      data: {
        text: "This is coming from the C data"
      }
    }]
  }
})

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <div 
    v-for="(item, key) in fields"
    :is="item.type"
    :data="item.data"
    :key="key"
  ></div>
</div>

如果我遗漏了什么，或者您想进一步解释什么，请告诉我。

---

编辑：

现在我了解了其他属性是如何提供的，您可能只发送整个对象，而不是发送包含非类型信息的特定对象。

fields:  [{
  type: "A",
  textA: "This is coming from the A data!"
}, {
  type: "A",
  textA: "This is coming from the A data!"
}, {
  type: "B",
  textB: "This is coming from the B data!"
}, {
  type: "C",
  textC: "This is coming from the C data!"
}]

<div 
  v-for="(item, key) in fields"
  :key="key"
  :is="item.type"
  :data="item"
></div>