组件
<ContentQuery>
查询和显示内容的最快方式。
The <ContentQuery> 是一个无渲染组件，缩短了对 queryContent() 的访问。
pages/[...slug].vue
<!-- Similar to <ContentDoc :path="$route.path" /> -->
<template>
<main>
<ContentQuery :path="$route.path" find="one" v-slot="{ data }">
<ContentRenderer :value="data" />
</ContentQuery>
</main>
</template>
属性
path: 要从内容源加载的内容的路径。- 类型:
string - 默认值:
undefined
- 类型:
only: 从一组键的数组中选择一个字段子集。- 类型:
string[] - 默认值:
undefined
- 类型:
without: 从一组键的数组中删除一个字段子集。- 类型:
string[] - 默认值:
undefined
- 类型:
where: 使用where子句定义过滤结果。- 类型:
{ [key: string]: any } - 默认值:
undefined
- 类型:
sort: 使用sort子句定义排序结果。- 类型:
SortParams - 默认值:
undefined
- 类型:
limit: 限制结果数量。- 类型:
number - 默认值:
undefined
- 类型:
skip: 跳过一定数量的结果。- 类型:
number - 默认值:
undefined
- 类型:
locale: 根据语言环境过滤内容。- 类型:
string - 默认值:
undefined
- 类型:
find: 要进行的查询类型。- 类型:
string - 值:
'one'或'surround'或undefined - 默认值: 如果未指定，将使用
.find()
- 类型:
插槽
The default 插槽可用于通过 v-slot="{ data }" 语法渲染内容。
The empty 插槽可用于在文档主体为空时显示默认内容。
The not-found 插槽可用于在渲染文档之前显示默认内容。
Where 子句
pages/about.vue
<template>
<main>
<ContentQuery path="/about/authors" :where="{ type: 'csv' }">
<template #default="{ data }">
<ul>
<li v-for="author of data" :key="author.name">
{{ author.name }}
</li>
</ul>
</template>
<template #not-found>
<p>No authors found.</p>
</template>
</ContentQuery>
</main>
</template>