javascript - 组件的 Vue.js 接口(interface)

Question

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

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

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

经过一番研究后，我遇到了以下问题:我想创建一种可以动态加载这些组件的方法；如果带有 "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>