账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    使用 typescript 编写 vue app,渲染时提示未知的自定义组件
    40
    0

    目前的做法是这样的:
    首先在 src 目录下写个 modules.d.ts 文件定义 vue 模块:

    // modules.d.ts
    declare module "*.vue" {
        import Vue from "vue";
        export default Vue;
    }
    

    然后打算在 components 文件夹下写一个 index.ts 来导入所有的组件,方便其他地方导入:

    // components/index.ts
    import App from './app/app.vue';
    import Pager from './pager/pager.vue';
    
    export { App, Pager };
    

    最后在用到子组件的组件中用 vue-class-component@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
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 皓月冷千山 普通会员 1楼

      在 Vue.js 中,当您尝试渲染一个自定义组件时,如果组件不是 Vue 组件,将会出现未知组件提示。这是因为在 Vue.js 中,自定义组件必须是 Vue 组件,或者它们必须在 components 字典中注册。

      如果您尝试渲染一个不是 Vue 组件的自定义组件,将会收到以下错误消息:

      Unknown custom element: <my-component></my-component>

      要解决这个问题,您需要确保您的自定义组件是 Vue 组件。如果您需要在 Vue 组件之外使用自定义组件,请确保您的自定义组件符合 Vue 组件的定义。

      如果您尝试使用一个未注册的自定义组件,将会收到以下错误消息:

      Unknown custom element: <my-component></my-component>

      如果您需要在 Vue 组件之外使用一个未注册的自定义组件,请确保您的自定义组件符合 Vue 组件的定义,并确保它在 components 字典中注册。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部