Vue.js 2:如何从 .vue 文件初始化(构建)Vue 组件?

新手上路,请多包涵

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

App.vue

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

new 行报告错误:

未捕获的类型错误:MyComponent.default 不是构造函数

那么如果我想创建组件怎么办?

原文由 Alfred Huang 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 332
2 个回答

最后,我自己找到了解决方案,很简单:

Component imported 本身不是构造函数,但我们可以很容易地创建一个构造函数:

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

原文由 Alfred Huang 发布,翻译遵循 CC BY-SA 3.0 许可协议

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

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

文档: 链接

编辑:如何创建虚拟机实例

如果你想初始化 vm 实例,你可以使用 Vue.extend 来完成。所做的是:

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

这里需要注意的一点是:

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

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

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

原文由 Saurabh 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题