Question

我正在尝试创建一个Component实例：

`App.vue`

import MyComponent from './components/MyCompnent.vue';
export default {
    mounted() {
        // The following line fails.
        const vm = new MyComponent();
        vm.$mount('#some-place');
    }
}

并且new行报告错误：

未捕获的TypeError：MyComponent.default不是构造函数

那么如果我想创建组件呢？

Answer 1

最后，我自己找到了解决方案，非常简单：

导入的Component本身不是构造函数，但我们可以轻松地创建一个构造函数：

import MyComponent from './components/MyCompnent.vue';
const MyComponentConstructor = Vue.extend(MyComponent);

所以最终的解决方案是：

import MyComponent from './components/MyCompnent.vue';
export default {
    mounted() {
        const MyComponentConstructor = Vue.extend(MyComponent);
        const vm = new MyComponentConstructor();
        vm.$mount('#some-place');
    }
}

Answer 2

以下是在其他组件中注册组件的方法：

export default {
  el: '#some-place'
  components: {
      'my-component'
  }
}

文档：quickstart guide

已编辑：如何创建虚拟实例

如果要初始化vm实例，可以使用link执行此操作。做的是：

创建基础Vue构造函数的“子类”。参数应该是包含组件选项的对象。

这里要注意的一点是：

这里要注意的特殊情况是数据选项 - 当与Vue.extend（）一起使用时，它必须是一个函数。

您需要在代码中进行类似以下的更改：

import MyComponent from './components/MyCompnent.vue';
const vmClass = Vue.extend(MyComponent)
const vm = new MyComponent();
vm.$mount('#some-place');

Answer 3

试试这个

脚本：

import MyComponent from './components/MyCompnent.vue';

export default {
    name : 'comp',
    components :{
      MyComponent
    }  
  }

<强> HTML 你可以像这样用

来调用你的组件

<template>
<mycomponent></mycomponent>
</template>

Vue.js 2：如何从.vue文件初始化（构造）Vue组件？

`App.vue`

3 个答案:

已编辑：如何创建虚拟实例