Vue中元件中引入元件只渲染標籤名

Ramirez發表於2019-03-11
Vue元件

有一個頁面A，引入了自定義B元件，B元件裡有引入了C元件

頁面渲染就成了這樣，loginBox就是C元件裡面本身是有內容的，但現在成了一個自定義標籤名。

Vue中元件中引入元件只渲染標籤名

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')複製程式碼

最終想要的東西也渲染出來了

Vue中元件中引入元件只渲染標籤名


但有沒有大佬給解釋一下為什麼呀·············


相關文章