如何将组件呈现到_slug.vue中以获取内容？

Question

我想要获取markdown页面的内容。如果我在没有组件的情况下在_slug.vue中呈现它，它工作得很好，但是我不想重复代码，所以我需要在slug和组件之间传递“about”。

这是组件Content.vue：

<template>
<div>
    <nuxt-content :document="article" />
</div>
</template>
<script>
  export default {
      props:{
          message:{
              type: String,
              required: true,
              default: "hello"
          }
      },
    async asyncData({ $content, params }) {
      const article = await $content('blog', params.slug).fetch()
      return { article }
    }
  }
</script>
<style>
.wrapper {
  @apply min-h-screen flex justify-center items-center text-center mx-auto;
}
.card {
  @apply p-10 rounded-lg text-emerald-500 bg-emerald-100 shadow-lg;
  .title {
    @apply text-6xl font-bold;
  }
}
</style>

这是_slug.vue

<template>
<div>
    <NavBar />
    <Carousel />
    <!-- <nuxt-content :document="article" /> -->
    <Content message='blog'/>
</div>
</template>


<script>
/*
  export default {
    async asyncData({ $content, params }) {
      const article = await $content('blog', params.slug).fetch()
      return { article }
    }
  }
  */
</script>

我得到了这个错误：

Property or method "article" is not defined on the instance but referenced during render.

Answer 1

为了避免重复，我相信这是一个你可以做的选择：

您将从页面组件检索数据，并将文章作为道具传递给内容。

/* _slug.vue */
<template>
<div>
    <NavBar />
    <Carousel />
    <Content :article='article'/>
</div>
</template>


<script>
  export default {
    async asyncData({ $content, params }) {
      const article = await $content('blog', params.slug).fetch()
      return { article }
    }
  }
</script>

/* Content */
<template>
<div>
    <nuxt-content :document="article" />
</div>
</template>

<script>
export default {
  props: {
    article: Object,
  },
}
</script>