目前的做法是这样的: 首先在'src'文件夹下放一个'modules.d.ts'文件来定义vue模块:
// modules.d.ts
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
然后写一个index.ts
我的components
下的文件用于导入所有组件并在任何地方使用它们的文件夹:
// components/index.ts
import App from './app/app.vue';
import Pager from './pager/pager.vue';
export { App, Pager };
最后用@Component
注册子组件来自 vue-class-component
在它被使用的地方:
// components/app/app.ts
import { Pager } from '@/components';
@Component({
components: {
'pager': Pager
}
})
export default class App extends Vue {
}
但是子组件还没有被渲染并且在控制台中得到这个错误:
[Vue warn]: Unknown custom element: <pager> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
如果我直接导入 vue 文件,它工作得很好:
// components/app/app.ts
//import { Pager } from '@/components';
import Pager from '@/components/pager/pager.vue';
@Component({
components: {
'pager': Pager
}
})
export default class App extends Vue {
}
谁能告诉我哪里不对,正确的做法是什么?
文件夹结构:
.
`-- src
|-- components
| |-- app
| | |-- app.css
| | |-- app.ts
| | `-- app.vue
| |-- index.ts
| `-- pager
| |-- pager.css
| |-- pager.ts
| `-- pager.vue
`-- modules.d.ts
最佳答案
只需更改组件的注册方式即可。 改变
@Component({
components: {
'pager': Pager
}
})
进入
@Component({
components: {
'pager': () => Promise.resolve(Pager)
}
})
关于typescript - 使用带有 typescript 的 vue 渲染时得到 “Unknown custom element”,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48049034/