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

Question

在Vue.js应用程序中本地注册组件有问题。我试图在它的父MovieCard.vue内部使用MainView.vue。在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 src\components\MainView.vue
       <VApp>
         <App> at src\App.vue
           <Root>

下面是MovieCard.vue(child组件的代码)

<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(parent组件)：

<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根组件中，它将按照预期的方式工作(就像在App.vue(例如MainView.vue)中本地注册的任何其他子组件一样)。

此外，我要说，我在我的应用程序中使用Vuex和Vuetify。

试图解决这个问题好几个小时，但目前还没有结果.

，谢谢您的帮助！

Answer 1

尝试像这样在MainView中定义组件：

components: {
  'movie-card': MovieCard
}

编辑:也许是因为你两次定义你的组件

Answer 2

在OP问题中，他犯了在components中定义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.

我的错误是，我把“components component”一词误读为“没有s的component”。所以，如果你们中的任何一个人晚些时候要看到这样的错误，很有可能是错误输入了之类的东西。

Vue错误提示也很聪明，可以问我们did you register the component correctly?，但是我们假设我们做了，但是等等，我们可能没有。

话虽如此，这个问题与

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

如果你读了索瓦利娜的回答，请注意答案是他的编辑

另外，我认为问题与有关，因此i made sure providing the "name" option，但由于您可以阅读这，它与"name" option无关，因为movie-card不是递归组件。在我的例子中，我通过添加字符s (而不是任何name )来解决我的问题。