时间戳

首页 > 解决方案 > 未知的自定义元素：- 您是否正确注册了组件？

typescript - 未知的自定义元素：- 您是否正确注册了组件？

问题描述

我正在尝试使用 is 指令渲染组件

<template>
  <div>
    <v-tabs v-model="currentTab" fixed-tabs>
      <v-tab v-for="(item, i) in tabItems" :key="i">{{ item }} </v-tab>
    </v-tabs>
    <v-form ref="form" v-model="isValid" lazy-validation>
      <v-tabs-items v-model="currentTab">
        <v-tab-item v-for="(item, i) in tabItems" :key="i">
          <component :is="'my-company-form-general'"></component>
          <my-company-form-general />
        </v-tab-item>
      </v-tabs-items>
    </v-form>
  </div>
</template>

这有效<my-company-form-general />

但这不是

<component :is="'my-company-form-general'"></component>

我也试过文件名

<component :is="'MyCompantFormGeneral'"></component>

为什么它不起作用？

我正在使用 nuxt v2.14.6

该组件被调用MyCompanyFormGeneral.vue并且它在同一个文件夹中

<template>
    <div>
        General Component
    </div>
</template>

<script lang="ts">
    import Vue from 'vue'

    export default Vue.extend({

    })
</script>

<style scoped>

</style>

标签： typescriptvue.jsnuxt.jsdirective

解决方案

使用components: truenuxt 时会浏览您的页面和组件并自动导入您使用的所有组件。

使用动态组件 ( <component is="..." />) 时，它不知道要导入什么，您必须手动导入将与它一起使用的组件：

import Vue from 'vue'
import MyCompantFormGeneral from '~/components/your-path/your-component-here.vue'

export default Vue.extend({
  components: {
    MyCompantFormGeneral
  }
})

我希望这可以解决您的问题。

推荐阅读