Vue.js单文件组件嵌套失效：子组件未渲染且无报错求助

Hey there! It’s super frustrating when a component doesn’t show up and you don’t get any errors to guide you—let’s walk through the most common fixes for this exact scenario.

1. Make Sure You’ve Registered the Menu Component #

This is the #1 culprit. Vue won’t render a component unless it’s registered either locally in the parent component (App.vue) or globally in your main.js file.

Local Registration (Recommended for Most Cases) #

In your App.vue, you need to import the Menu component and declare it in the components option:

<template>
  <div id="app">
    <!-- Use the component here—note the tag name -->
    <Menu />
    <!-- Or use kebab-case: <menu-component /> if you rename to avoid conflicts -->
  </div>
</template>

<script>
// Double-check the file path! If menu.vue is in a components folder, use ./components/menu.vue
import Menu from './menu.vue'

export default {
  name: 'App',
  components: {
    Menu // Register the component locally
  }
}
</script>

Global Registration (If You Need It Everywhere) #

If you want to use Menu across multiple components without re-registering, add this to main.js:

import Vue from 'vue'
import App from './App.vue'
import Menu from './menu.vue'

// Globally register the component
Vue.component('Menu', Menu)

new Vue({
  render: h => h(App)
}).$mount('#app')

2. Avoid Conflicts with Native HTML Tags #

HTML has a native <menu> element, which can cause Vue to ignore your custom component if you use <menu> as the tag. To fix this:

• Rename your component to something like AppMenu or MainMenu
• Use the corresponding kebab-case tag: <app-menu> or <main-menu>

Example (rename menu.vue to AppMenu.vue):

<template>
  <div class="app-menu">
    <ul>
      <li>Home</li>
      <li>About</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'AppMenu'
}
</script>

Then in App.vue:

<template>
  <div id="app">
    <app-menu />
  </div>
</template>

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

export default {
  components: {
    AppMenu
  }
}
</script>

3. Verify the Menu Component Has Visible Content #

It sounds obvious, but double-check that your menu.vue actually has content in its <template> section. If it’s empty or only contains hidden elements, it won’t show up:

// menu.vue (don't leave this empty!)
<template>
  <div class="menu">
    <h2>My Navigation Menu</h2>
    <nav>
      <a href="/home">Home</a>
      <a href="/about">About</a>
    </nav>
  </div>
</template>

4. Check for Hidden Elements via CSS #

Sometimes the component is rendering, but CSS is hiding it. Pop open your browser’s dev tools to inspect the element and see if:

• It has display: none applied
• It’s positioned off-screen (e.g., left: -9999px)
• It has visibility: hidden or opacity: 0

Start with these steps—they’ll cover 90% of cases where a component fails to render silently. Let me know if you still hit snags after trying these!

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