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
      ...
  }
})

希望这有帮助。

在vue中动态加载组件

1 个答案: