我们为什么要自定义组件?
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>