uni-app自定义组件

我们为什么要自定义组件？

1.在我们开发一个项目的时候大多数的页面或功能是一样的，我们可以提成一个组件，可以在项目的多个地方任意次数的复用，减少代码的重复

2.将我们的项目页面划分成多个组件组成，让我们看起来更加有结构性，并且有助于提高应用的性能

3.页面有多个组件组成，能够帮助我们更加好的管理，并且可扩展性高，利于多人共同开发

如何定义自定义组件

步骤

1.在uni-app项目中创建components目录

创建好之后右击这个目录就可以看到多了一个新建组件选项

注意：确保目录的名字是components要不然，右击的时候就没有新建组件这个选项，并且区分大小写

2.在components目录上右击选择新建组件

3.在创建好的.vue文件上写上你要自定义的组件

<template>
	<view class="userInfo">
		<image src="../../static/logo.png" class="avatar"></image>
		<view class="userName">小明</view>
	</view>
</template>

<script setup>
</script>

<style lang="scss" scoped>
.userInfo{
	width: 100%;
	height: 200px;
	background: gray;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	image{
		width: 100px;
		height: 100px;
		border-radius: 50%;
	}
	.userName{
		padding: 10px 0;
		font-size: 20px;
	}
}
</style>

建议大家在自定义组件的时候加上scoped，如果你自定义了很多个组件话，如果class名字复用了，可能会危及到它们俩的样式，加上scoped就保证了此页面的CSS样式只在当前页面有效

4.在页面上调用自己新建的自定义组件

<template>
	<user-avatar></user-avatar>
</template>

<script setup>
</script>

<style lang="scss" scoped>
</style>

页面效果