nuxt.js에서 중첩 된 구성 요소를 올바르게 사용하는 방법

Question

안녕하세요! Lord는 nuxt js에서 중첩 된 구성 요소를 사용하는 방법을 알려주십시오.

// ~/components/general/Page.vue 

<template lang="pug"> 
    div(id="page" class="align-center") 
</template> 

// ~/components/general/Header.vue 

<template lang="pug"> 
    header 
    div(class="align-center align-middle") 
     img(src="~/assets/general/header/logo.png") 
</template> 

// pages/index.vue 

<template lang="pug"> 
div 
    page 
    test 
</template> 

<script> 
import page from '~/components/general/Page.vue' 
import test from '~/components/general/Header.vue' 

export default { 
    components: { 
    page, 
    test 
    } 
} 
</script> 

따라서이 디자인은 작동하지 않습니다. 벌기 위해 필요한 것은 무엇입니까? 내가 부모 구성 요소에서 슬롯을 사용하려고

나는 예를 들어, 감사합니다,하지만 난 여전히 일을 가져올 수 없습니다 당신이에 헤드 구성 요소를 포함하지 않는 이유는

// ~/components/general/Page.vue 

<template lang="pug"> 
    div(id="page" class="align-center") 
    slot 
</template> 

Answer 1

당신의 이 같은 페이지 구성 요소 :

// ~/components/general/Page.vue 

<template lang="pug"> 
    div(id="page" class="align-center") 
    my-header 
</template> 
<script> 
    import MyHeader from '~/components/general/Header.vue' 
    export default { 
    components: { 
     MyHeader 
    } 
    } 
</script> 

// ~/components/general/Header.vue 

<template lang="pug"> 
    header 
    div(class="align-center align-middle") 
     img(src="~/assets/general/header/logo.png") 
</template> 

// pages/index.vue 

<template lang="pug"> 
div 
    page 
</template> 

<script> 
import page from '~/components/general/Page.vue' 

export default { 
    components: { 
    page, 
    } 
} 
</script> 

은 또한 당신이 당신의 레이아웃 파일에 이러한 구성 요소를 넣을 것을 제안하고 싶습니다. 이 방법을 사용하면 훨씬 더 의미가 있습니다.

// ~/components/general/Header.vue 

<template lang="pug"> 
    header 
    div(class="align-center align-middle") 
     img(src="~/assets/general/header/logo.png") 
</template> 

// layouts/default.vue 

<template lang="pug"> 
    div(id="page" class="align-center") 
    my-header 
    nuxt 
</template> 

<script> 
    import MyHeader from '~/components/general/Header.vue' 
    export default { 
    components: { 
     MyHeader 
    } 
    } 
</script> 

// And then the <nuxt></nuxt> will be replaced by whatever you put inside 
// your pages files 

// pages/index.vue 

<template lang="pug"> 
div 
    h1 My Page 
</template> 

<script> 
export default { 
    layout: 'default' 
} 
</script>