组件
<ContentList>
使用组件查询内容的最快方式。
<ContentList> 组件获取文档列表，并允许您使用 插槽 渲染它们。
获取路径默认为内容根目录 (/)。
可以为组件提供显式 路径。
pages/index.vue
<template>
<main>
<ContentList path="/articles" v-slot="{ list }">
<div v-for="article in list" :key="article._path">
<h2>{{ article.title }}</h2>
<p>{{ article.description }}</p>
</div>
</ContentList>
</main>
</template>
道具
path: 要从内容源加载的内容的路径。- 类型:
string - 默认值:
'/'
- 类型:
query: 要传递给<ContentQuery />组件的查询构建器参数对象。- 类型:
QueryBuilderParams - 默认值:
undefined
- 类型:
插槽
default 插槽可用于通过 v-slot="{ list }" 语法渲染内容
pages/index.vue
<template>
<main>
<ContentList path="/articles" v-slot="{ list }">
<div v-for="article in list" :key="article._path">
<h2>{{ article.title }}</h2>
<p>{{ article.description }}</p>
</div>
</ContentList>
</main>
</template>
not-found 插槽可在没有文档匹配查询时使用
pages/index.vue
<template>
<main>
<ContentList path="/articles">
<template #default="{ list }">
<!-- ...default slot -->
</template>
<template #not-found>
<p>No articles found.</p>
</template>
</ContentList>
</main>
</template>
查询示例
pages/index.vue
<script setup lang="ts">
import type { QueryBuilderParams } from '@nuxt/content/dist/runtime/types'
const query: QueryBuilderParams = { path: '/articles', where: [{ layout: 'article' }], limit: 5, sort: [{ date: -1 }] }
</script>
<template>
<main>
<ContentList :query="query" v-slot="{ list }">
<div v-for="article in list" :key="article._path">
<h2>{{ article.title }}</h2>
<p>{{ article.description }}</p>
</div>
</ContentList>
</main>
</template>