组件的存在极大程度的减轻了程序员的开发工作量，对于页面中那些样式基本一致的部分。无疑组件的存在是极为重要的，避免了大量的重复工作量出现。

组件不仅在前期开发中极为重要，在后期管理更是一大助力。使用组件极大的减轻了后期中对于产品的维护成本。

在如此明显的优势下，uni-app中vue3+setup我们可以如何使用组件来减轻工作量呢？

一、vue3+setup子组件test.vue代码如下：

<template>
	<view>
		{{props.title}}
	</view>
</template>
<script setup> 
	const props = defineProps({
		title:String
	})
</script>

二、vue3+setup父级页面调用及使用子组件test.vue

<template>
	<view>
		<testBox title="测试内容"></testBox>
		<testBox :title="test.title"></testBox>
	</view>
</template>
<script lang="ts" setup>
	import { reactive } from 'vue';
	import testBox from '@/components/test.vue'
	const test = reactive({
		title:'这是测试内容'
	})
</script>

vue3+setup对于组件的使用，不需要components进行注册。直接引入后，就可以在页面中使用。