有一个页面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')复制代码
最终想要的东西也渲染出来了
但有没有大佬给解释一下为什么呀·············