Vue.js - 如何在這個簡單的例子中呈現嵌套組件？

Question

我迷路了。我不知道，我不明白我怎麼才能正確地註冊和渲染組件嵌套在其他組件。請運行這個例子，點擊關於鏈接一個外觀到控制檯。有關於組件註冊的警告。

var appLayout = { 
 
    template: ` 
 
    <div id="app" class="container"> 
 
     <header> 
 
     <slot name="header"></slot> 
 
     </header> 
 

 
     <slot></slot> 
 

 
     <footer> 
 
     <slot name="footer"></slot> 
 
     </footer> 
 
    </div> 
 
    ` 
 
} 
 

 
var home = { 
 
    template: ` 
 
    <main> 
 
     <h3>Home</h3> 
 
    </main> 
 
    ` 
 
} 
 

 
var about = { 
 
    template: ` 
 
    <main> 
 
     <nested-component></nested-component> 
 
    </main> 
 
    ` 
 
} 
 

 
var nestedComponent = { 
 
    template: ` 
 
    <main> 
 
     <h3>About</h3> 
 
    </main 
 
    ` 
 
} 
 

 
var routes = [ 
 
    { 
 
    path: '/', 
 
    component: home 
 
    }, 
 
    { 
 
    path: '/about', 
 
    component: about 
 
    } 
 
] 
 

 
var router = new VueRouter({ 
 
    routes 
 
}) 
 

 
new Vue({ 
 
    template: '#app', 
 
    router, 
 
    components: { 
 
    appLayout 
 
    } 
 
}).$mount('#app')

.fade-enter-active, 
 
.fade-leave-active { 
 
    transition-property: opacity; 
 
    transition-duration: 0.4s; 
 
} 
 
.fade-enter-active { 
 
    transition-delay: 0.2s; 
 
} 
 
.fade-enter, 
 
.fade-leave-active { 
 
    opacity: 0; 
 
}

<template id="app"> 
 
    <app-layout> 
 
    <nav slot="header"> 
 
     <router-link to="/">Home</router-link> 
 
     <router-link to="/about">About</router-link> 
 
    </nav> 
 

 
    <transition name="fade"> 
 
     <router-view></router-view> 
 
    </transition> 
 

 
    <p slot="footer"> 
 
     Copyright notice 
 
    </p> 
 
    </app-layout> 
 
</template> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.7.0/vue-router.min.js"></script>

Answer 1

當你使用一個組件，無需註冊全局它，你需要告訴明確列出該設備作爲一個你會使用。

var about = { 
    template: ` 
    <main> 
     <nested-component></nested-component> 
    </main> 
    `, 
    components:{ 
    nestedComponent 
    } 
} 

代碼中的另外兩個小錯誤;需要定義nestedComponent之前about，並且在nestedComponent的末尾有一個缺角尖括號。

var appLayout = { 
 
    template: ` 
 
    <div id="app" class="container"> 
 
     <header> 
 
     <slot name="header"></slot> 
 
     </header> 
 

 
     <slot></slot> 
 

 
     <footer> 
 
     <slot name="footer"></slot> 
 
     </footer> 
 
    </div> 
 
    ` 
 
} 
 

 
var home = { 
 
    template: ` 
 
    <main> 
 
     <h3>Home</h3> 
 
    </main> 
 
    ` 
 
} 
 

 
var nestedComponent = { 
 
    template: ` 
 
    <main> 
 
     <h3>About</h3> 
 
    </main> 
 
    ` 
 
} 
 

 
var about = { 
 
    template: ` 
 
    <main> 
 
     <nested-component></nested-component> 
 
    </main> 
 
    `, 
 
    components:{ 
 
    nestedComponent 
 
    } 
 
} 
 

 

 

 
var routes = [ 
 
    { 
 
    path: '/', 
 
    component: home 
 
    }, 
 
    { 
 
    path: '/about', 
 
    component: about 
 
    } 
 
] 
 

 
var router = new VueRouter({ 
 
    routes 
 
}) 
 

 
new Vue({ 
 
    template: '#app', 
 
    router, 
 
    components: { 
 
    appLayout 
 
    } 
 
}).$mount('#app')

.fade-enter-active, 
 
.fade-leave-active { 
 
    transition-property: opacity; 
 
    transition-duration: 0.4s; 
 
} 
 
.fade-enter-active { 
 
    transition-delay: 0.2s; 
 
} 
 
.fade-enter, 
 
.fade-leave-active { 
 
    opacity: 0; 
 
}

<template id="app"> 
 
    <app-layout> 
 
    <nav slot="header"> 
 
     <router-link to="/">Home</router-link> 
 
     <router-link to="/about">About</router-link> 
 
    </nav> 
 

 
    <transition name="fade"> 
 
     <router-view></router-view> 
 
    </transition> 
 

 
    <p slot="footer"> 
 
     Copyright notice 
 
    </p> 
 
    </app-layout> 
 
</template> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.1/vue.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.7.0/vue-router.min.js"></script>