无法在 Vue.js 中本地注册组件。"[Vue 警告]：未知的自定义元素"

Question

在vue.js应用中本地注册组件有问题。我正在尝试使用movieCard.vue内部的parent mainview.vue。将Everythig像Vue文档一样，但仍会遇到此错误：

 [Vue warn]: Unknown custom element: <movie-card> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <MainView> at srccomponentsMainView.vue
       <VApp>
         <App> at srcApp.vue
           <Root>

这里是 moviecard.vue (子组件(的代码

<template>
<div>
 <!-- <v-card class="movie-card" height="30vh" hover>
        <v-card-media :src="'http://image.tmdb.org/t/p/w500' + movie-info.poster_path" height="100%">
         <v-card class="movie-card__info-cover" width="100%" height="100%">
             {{this.movie-info}}
         </v-card>
        </v-card-media>
       </v-card> -->
</div>      
</template>
<script>
export default {
    name: "MovieCard",
    props: ["movie-info"],
    data() { 
        return {
        visible: false
        }
    },
    created() {
        console.log("Info:", this["movie-info"])
    }
}
</script>
<style>
</style>

和 mainview.vue (父级(：

<template>
  <v-container class="main-view" column>
    <v-btn color="pink" dark small absolute bottom left fab></v-btn>
    <v-tabs centered grow color="pink" slot="extension" slider-color="yellow">
      <v-tab class="main-view__option" @click="setCategory('popular')">
        Popular
      </v-tab>
      <v-tab class="main-view__option" @click="setCategory('upcoming')">
        Upcoming
      </v-tab>
      <v-tab class="main-view__option" @click="setCategory('topRated')">
        Top Rated
      </v-tab>
    </v-tabs>
    <v-container class="movie-cards__container" fluid grid-list-xl>
      <v-layout row wrap>
        <v-flex xs3 md2 class="" v-for="n in this.movies.movieLists.list" :key="n.id">
          <movie-card :movie-info="n"></movie-card>
        </v-flex>
        <infinite-loading @infinite="infiniteHandler" spinner="spiral"></infinite-loading>
      </v-layout>
    </v-container>
  </v-container>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex';
import InfiniteLoading from 'vue-infinite-loading';
import MovieCard from "./MovieCard"
console.log(MovieCard)
export default {
  name: 'MainView',
  components: {MovieCard}, 
  data () {
    return {
      chosenCategory: 'popular'
    }
  },
  computed: {
    ...mapState([
      'movies'
    ])
  },
  methods: {
    ...mapActions([
      "getNextPageByCategory",
      'setCategory'
    ]),
    async infiniteHandler($state) {
      await this.getNextPageByCategory(this.chosenCategory);
      $state.loaded();
      console.log("yay");
    },
    ...mapMutations([])
  },
  components: {
    InfiniteLoading
  }
}
</script>

另外，我已经注意到，如果我将相同的组件放入我的app.vue root组件中，它会按预期工作(就像其他任何子组件一样，这些子组件在app.vue中本地注册(例如mainview.vue.vue.vue((。

此外，我会说我正在使用vuex，并在我的应用程序中使用vuetify。

试图解决此问题数小时，但目前尚无结果...

预先感谢您的帮助！

Answer 1

尝试在MainView中定义您的组件：

components: {
  'movie-card': MovieCard
}

编辑：也许是因为您定义了两次组件

Answer 2

在OP问题中，他在MainView.vue中两次定义components的错误，因此后者components覆盖了第一个，这是一个声明的movie-card组件，因此只有

components: {
  InfiniteLoading
}

是一天结束时有效的注册组件，

components: {MovieCard},

被覆盖

---

今天，我经历了同样的狗屎

Unknown custom element: <movie-card> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

我的错误是i 错误地将components一词误入为component 没有s。因此，如果你们以后去看这种错误，那么您很有可能错误某物。

VUE错误提示也足够聪明，可以问我们did you register the component correctly?，但我们假设我们做到了，但是请坚持，我们可能没有。

话虽如此，问题与

无关

components: {
  'movie-card': MovieCard 
}
// the above is the same at the below in Vue
components: {
  MovieCard
} 

如果您阅读了Sovalina的答案，请注意答案是他的 edit

---

另一件事顺便说一句，我以为问题与recursive components 有关，所以我 made sure providing the "name" option，但是正如您可以阅读的那样，它与"name" option无关movie-card不是递归组件。就我而言，我通过添加字符s而不是任何name。