Question

美好的一天！主请告诉我如何在nuxt js中使用嵌套组件？

await

因此这种设计不起作用。有什么必要使它获得？我将很感激一个例子

我尝试使用父组件中的插槽，但我仍然无法使其工作

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

Answer 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>

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

1 个答案: