组件可以说是前端开发中重要的组成部分，合理的使用组件不仅可以极大程度上减轻工作量更便于项目后期的维护。

因此我们在前端开发中要合理的分配组件及对组件应用，本文就来介绍在nuxt3中关于组件的基础使用和传值操作。

如：创建组件test，组件中显示值。

一、components文件中定义组件testbox.vue

<template>
    <div>{{title}}</div>	
</template>
<script lang="ts">
    export default {
        props: {
            title:{
                type:String,
                default:''
            }
        },
        setup (props, context) {
			console.log(props)
			console.log(context)
        }
    }
</script>

从对于上面组件的代码可以看出，差异主要在于vue3的setup区域。

二、父级调用components中的组件

<template>
    <div>
        <testbox :title="test.data" ></testbox>
    </div>
</template>
<script lang="ts">
import { defineComponent , reactive } from 'vue';
export default defineComponent({
    setup () {
        const test = reactive({
            data:'显示内容'
        })
        return {
            test
        }
    }
})
</script>

从上方演示代码可以看出，在nuxt3中关于组件的使用要比nuxt2简单很多。nuxt2中需要我们在js区域引入对应的组件才可以使用。但nuxt3自动导入你的components目录中的任何组件。

由此也可以极大的简化我们代码的开发量，也许在单个地方来说可能说简化的可以忽略不计，但如果你的项目足够大，那么最终节省的工作量就极为可观。

如果你在components目录中有嵌套组件，要如何使用呢？

如：components》base文件夹》test.vue

<baseTest />

如上便是关于nuxt3组件的基础使用，更多一些特殊情况。可以查看官网进行详细查阅。