Vue中组件中引入组件只渲染标签名

有一个页面A，引入了自定义B组件，B组件里有引入了C组件

页面渲染就成了这样，loginBox就是C组件里面本身是有内容的，但现在成了一个自定义标签名。

A页面引入B（NavBar）

<template>
    <div class="desktop-material-wrapper">
        <nav-bar/>
        <div class="app-main">
            <router-view v-wechat-title="$route.meta.title"></router-view>
        </div>
        <nav-footer/>
    </div>
</template>

B页面引入C（loginBox）

<template>
    <nav class="container fixed-container clearfix">
        <div class="max-width-container nav-container">
            <div class="flex-container logo-container"></div>
            <div class="operation-container"></div>
        </div>
        <loginBox v-if="ifShowLoginBox" @closeLoginBox="closeLoginBox"></loginBox>
    </nav>
</template>

组件引用就类似这样，先import，再在components里注册

import { Navbar, Footer } from './components'
export default {  components: {    'nav-bar': Navbar,    'nav-footer': Footer  }}

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

解决方案

直接在components里这样注册即可

'loginBox': () => import('@/views/layout/components/Login')

最终想要的东西也渲染出来了

但有没有大佬给解释一下为什么呀·············