Question

在Vue.js应用中本地注册组件时遇到问题。我试图在其主要的MainView.vue中使用MovieCard.vue。像Vue文档中那样制作everythig，但仍然会收到此错误：

 [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 （子组件）

的代码

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

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

试图解决这个问题几个小时，但现在没有结果......

提前感谢您的帮助！

Answer 1

尝试在MainView中定义您的组件，如下所示：

components: {
  'movie-card': MovieCard
}

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

Answer 2

在OP问题中，他在components中两次定义MainView.vue时犯了错误，因此后者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。因此，如果你们中的任何一个人后来去发现这种错误，很可能是您输错了。

Vue错误提示也足够聪明，可以问我们did you register the component correctly?，但我们假设我们已经做到了，但是坚持下去，我们可能没有这样做。

话虽如此，问题与

无关

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

如果您阅读Sovalina's answer，请注意答案是他的编辑

另一件事，我认为问题与recursive components 有关，所以我made sure providing the "name" option，但是您可以读到this，它与"name" option无关，因为movie-card不是递归组件。就我而言，我通过添加字符s而不是任何name来解决了问题。

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

2 个答案:

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

2 个答案:

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