父组件未从Nuxt应用程序中的子组件获取数据

Question

这快把我逼疯了，所以我希望任何人都能帮助我。

我用@ Nuxt /content做了一个nuxt应用，我正在使用Netlify-CMS来创建内容。这一切似乎都运行得很好。然而，我试图显示一个组件，其中包含我拥有的MD文件的循环，但在index.vue中没有显示任何循环。

我知道(一点)关于道具和$emit的知识，但是因为我没有触发一个事件，所以这个似乎不起作用。

组件代码：

<template>
  <section>
    <h1>Releases</h1>
    <li v-for="release of rfhreleases" :key="release.slug">
      <h2>{{ release.artist }}</h2>
    </li>
  </section>
</template>

<script>
export default {
  components: {},
  async asyncData({ $content, params }) {
    const rfhreleases = await $content('releases', params.slug)
      .only(['artist'])
      .sortBy('createdAt', 'asc')
      .fetch()

    return {
      rfhreleases,
    }
  },
}
</script>

和index.vue代码：

<template>
  <div>
    <Hero />
    <Releases />
    <About />
    <Contact />
  </div>
</template>

<script>
export default {
  head() {
    return {
      script: [
        { src: 'https://identity.netlify.com/v1/netlify-identity-widget.js' },
      ],
    }
  },
}
</script>

如果我将组件代码作为index.vue的一部分，一切都会正常工作，但我希望避免这种情况，这就是为什么我尝试将循环放在组件中的原因。

Answer 1

如Nuxt文档中所述：

此挂钩只能放置在页面组件上。

这意味着asyncData只适用于pages/文件夹下的组件。

您有几个选项：

1. 您可以使用fetch。它是另一个异步钩子，但它可以从任何组件调用。它不会像asyncData那样阻塞渲染，因此组件将首先使用空数据实例化。
2. 您使用asyncData从页面获取数据，然后将结果作为道具传递给组件

<template>
  <div>
    <Hero />
    <Releases :releases="rfhreleases" />
    <About />
    <Contact />
  </div>
</template>

<script>
export default {
  async asyncData({ $content, params }) {
    const rfhreleases = await $content('releases', params.slug)
      .only(['artist'])
      .sortBy('createdAt', 'asc')
      .fetch()

    return {
      rfhreleases,
    }
  },
}
</script>