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;

动态添加自定义组件

1 个答案: