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

Question

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

`App.vue`

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

并且new行报错：

Uncaught TypeError: MyComponent.default is not a constructor

如果我想创建组件怎么办？

Answer 1

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

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

文档：link

已编辑：如何创建 vm 实例

如果你想初始化虚拟机实例，你可以使用Vue.extend来完成。所做的是：

Create a “subclass” of the base Vue constructor. The argument should be an object containing component options.

这里需要注意的一点是：

The special case to note here is the data option - it must be a function when used with Vue.extend().

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

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

Answer 2

试试这个

脚本：

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

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

Html 您可以像这样在 html 中调用您的组件

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

Answer 3

最后我自己找到了解决办法，很简单：

导入的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');
    }
}

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

Vue.js 2: How to initialize(construct) a Vue component from a .vue file?

mvvm

ecmascript-6

vue.js

vue-component

vuejs2

`App.vue`

已编辑：如何创建 vm 实例