Question

目前的做法是：首先在'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

Answer 1

这是一个有趣的，将index.ts移动到上部dir（在/ src下）应该可以工作。

Answer 2

只需更改组件的注册方式即可。变化

@Component({
    components: {
        'pager': Pager
    }
})

到

@Component({
    components: {
        'pager': () => Promise.resolve(Pager)
    }
})

使用带有打字稿的vue进行渲染时得到“未知的自定义元素”

2 个答案: