vue中组件的动态加载

Question

我有一棵使用 vue 显示的对象树。树中的每个节点都可以是特定类型，用户可以在树中从一个节点单击到另一个节点。大多数节点可以使用默认模板呈现相同的内容。但是有些节点需要完全不同的渲染。所以我认为 id 为每个节点类型使用特定的组件。

我知道我可以使用 "component is=" 方法，但是如何根据节点的类型加载特定组件，或者如果该类型没有特定组件，则加载默认组件。有什么方法可以检查组件是否存在？或者我应该维护一些需要特定组件的所有类型的数组？

Answer 1

正如您所提到的，您可以使用<component :is>。这是一个可能的实现：

您可以调用函数getNodeComponentByType(node)，它会根据当前节点返回特定类型的组件。

例如在您的模板中（即，如果这是您渲染树节点的方式）
<component v-for="node in nodes" :is="getNodeComponentByType(node)">

并随后实现该方法，如图所示：

var vm = new Vue({
  el: '#app,
  data: {
    ...
  },
  
  methods: {
    getNodeComponentByType: function (node) {
        switch(node.type) {
            case 'typeA' : return ATypeTreeNodeComponent;
            case 'typeB': return BTypeTreeNodeComponent;
            default: return defaultTreeNodeComponent;

        }
    }
  },
  components: {
      ATypeTreeNodeComponent,
      BTypeTreeNodeComponent,
      defaultTreeNodeComponent
      ...
  }
})

希望这会有所帮助。