nuxt.jsでネストされたコンポーネントを正しく使用する方法

Question

おはよう！ 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>