[英]Vue.js 2: How to initialize(construct) a Vue component from a .vue file?
我正在尝试创建一个组件实例:
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 不是构造函数
那么如果我想创建组件呢?
最后,我自己找到了解决方案,非常简单:
导入的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');
}
}
以下是在其他组件中注册组件的方法:
export default {
el: '#some-place'
components: {
'my-component'
}
}
文档: 链接
如果要初始化 vm 实例,可以使用Vue.extend来完成。 什么是:
创建基本 Vue 构造函数的“子类”。 参数应该是一个包含组件选项的对象。
这里需要注意的一点是:
这里要注意的特殊情况是 data 选项 - 当与 Vue.extend() 一起使用时,它必须是一个函数。
您需要在代码中进行类似于以下的更改:
import MyComponent from './components/MyCompnent.vue';
const vmClass = Vue.extend(MyComponent)
const vm = new MyComponent();
vm.$mount('#some-place');
尝试这个
脚本 :
import MyComponent from './components/MyCompnent.vue';
export default {
name : 'comp',
components :{
MyComponent
}
}
Html你可以像这样在 html 中调用你的组件
<template>
<mycomponent></mycomponent>
</template>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.