动态添加自定义组件

Question

我已经尝试了几个小时了，但我还没有走多远......

我正在尝试创建一个可以通过 XML 和代码添加的自定义组件。 通过 XML 添加非常简单，一分钟内就完成了，但是当我开始通过代码添加组件时，出现了很多问题。

我目前得到的错误：

JS: [Vue warn]: Error in mounted hook: "TypeError: o.default is not a constructor"

尝试在脚本标签中添加一个构造函数，如下所示：

constructor(icon,label,tap) {
    this.icon = icon;
    this.label = label;
    this.tap = tap;
  },
  data () {
     return {
        isActive: false
     };
  },
  props: {
    icon: String,
    height: Number,
    width: Number,
    label: String,

    // Should have argument
    tap: Function,
},

尝试像这样添加组件：

this.array.forEach(element => {
    var newComponent = new Component(element.icon,element.label,element.tap);
    this.$refs.container.addChild(newComponent);
  });

编辑 进口声明

import Component from "./Component.vue";

添加组件

components: {
  Component
},

XML 版本

<Component ref="customComponent" :tap="onTap" label="Custom Component" :icon="icon"/>

Answer 1

尝试更改下一行，尝试从该文件中查找默认导出

import Component from "./Component.vue";

到这个，它从文件中导出特定的类

import {Component} from "./Component.vue";

或者在Component.vue文件下面添加一行，设置默认导出

export default Component;