4.3-《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》页面组件（components）

《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》全文电子档将分章节陆续在“nuxt”微信订阅号原创发布，敬请关注。如果您等不及，急切提前阅读和实操，可以在订阅号中有偿获取完整电子教程和后续持续更新版本。

本教程配套示例在线预览网址：https://www.dvtop.cn

页面组件必须放在项目根目录的components目录下，Nuxt3会自动导入此目录中的所有组件，然后就可以在任何页面或其他组件中使用这些组件。

如果组件文件名中有.client.vue或.server.vue分别表示仅为客户端或服务端使用的组件。

注意：如果组件加载较慢，可通过<NuxtLoadingIndicator>组件加到~/app.vue或布局（layouts）里，为加载页面或组件显示进度条。

4.3.1 约定引用

组件名称约定为目录加上组件文件名的camelCase（驼峰式）命名方法。以下创建两个组件并在页面中直接引用。

~/components/TheFooter.vue

<template>   <div class="app-box">     这里是页脚组件。页面传递参数值：{ {props.pdate}}   </div> </template> <script setup>   const props = defineProps(['pdate']) </script>

~/components/base/foo/link.vue