Vue.js本地注册组件失败：[Vue warn]未知自定义元素问题求助

Hey there, let's fix that <movie-card> registration issue together! That Vue warning almost always means the component isn't being properly registered in your MainView.vue parent component. Let's walk through the most common fixes step by step:

1. Double-check your import path #

First, make sure you're importing MovieCard.vue with the correct relative path in MainView.vue. If both components live in the same src/components/ folder, your import should look like this:

import MovieCard from './MovieCard.vue'

• Watch out for typos and case sensitivity! If your file is named movie-card.vue (kebab-case) but you import ./MovieCard.vue, some file systems (like Linux/macOS) will throw an error. Match the filename exactly.
• If MovieCard is in a subfolder (e.g., src/components/cards/), adjust the path to ./cards/MovieCard.vue.

2. Verify local registration syntax #

In Vue 2, you need to explicitly register the component in the parent's components option. Here's the correct setup for MainView.vue:

<template>
  <div class="main-view">
    <!-- Now you can use <movie-card> or <MovieCard> here -->
    <movie-card :movie="someMovieData" />
  </div>
</template>

<script>
import MovieCard from './MovieCard.vue'

export default {
  components: {
    MovieCard // This registers the component locally
  },
  data() {
    return {
      someMovieData: { /* Your movie object */ }
    }
  }
}
</script>

If you're using Vue 3 with <script setup>, you don't need manual registration—just importing the component is enough:

<template>
  <div class="main-view">
    <movie-card :movie="someMovieData" />
  </div>
</template>

<script setup>
import MovieCard from './MovieCard.vue'

const someMovieData = { /* Your movie object */ }
</script>

3. Check for typos in component names #

• Ensure the name you use in the template (<movie-card>) matches the registered component name. Vue automatically converts PascalCase (MovieCard) to kebab-case (movie-card), so either works in the template—just don't mix up spellings (e.g., movie-card vs movie-cards).
• While your error isn't about recursion, double-check that MovieCard.vue has a valid name option if you ever plan to use it recursively (though this isn't required for normal parent-child use):

  // In MovieCard.vue
  export default {
    name: 'MovieCard', // Optional for non-recursive use, but good practice
    // ... rest of component code
  }
  

4. Quick sanity checks #

• Confirm MovieCard.vue exists in the path you're importing from.
• If you're using a build tool like Vite or Webpack, restart your dev server—sometimes cached builds can cause weird registration issues.

If you follow these steps, that warning should disappear and <movie-card> will render as expected!

内容的提问来源于stack exchange，提问作者Simon Bryatov