Блог

Главная - Вопросы по программированию - Неизвестный пользовательский элемент: — вы правильно зарегистрировали компонент?

Неизвестный пользовательский элемент: — вы правильно зарегистрировали компонент?

#typescript #vue.js #nuxt.js #directive

#typescript #vue.js #nuxt.js #директива

Вопрос:

Я пытаюсь отобразить компонент с помощью директивы 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>

Комментарии:

1. Используете ли вы components: true в своем nuxt.config.js , или вы вручную импортируете свои компоненты в свой компонент?

2. В моей конфигурации nuxt для компонентов установлено значение true

3. пожалуйста, не связывайте, если вам это действительно не нужно is="my-company-form-general"

Ответ №1:

При использовании components: true nuxt просмотрит ваши страницы и компоненты и автоматически импортирует все используемые вами компоненты.

При использовании dynamic components ( <component is="..." /> ) он не знает, что импортировать, и вам придется импортировать компоненты, которые вы будете использовать с ним вручную:

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

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

Я надеюсь, что это исправит вашу проблему.

Метки: