如何在 nuxt.js 中正确使用嵌套组件答案

【问题标题】：How to properly use nested components in nuxt.js如何在 nuxt.js 中正确使用嵌套组件
【发布时间】：2017-09-15 12:29:58
【问题描述】：

美好的一天！请大神告诉我如何在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>

【问题讨论】：

标签： nuxt.js

【解决方案1】：

为什么不将 Head 组件包含在 Page 组件中，如下所示：

// ~/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>

【讨论】：