uni-app学习笔记十二-vue3中创建组件

通过组件，可以很方便地实现页面复用，减少重复页面的创建，减少重复代码。一个页面可以引入多个组件。下面介绍在HBuilder X中创建组件的方法：

一.组件的创建

1.选中项目，右键-->新建目录(文件夹)，并将文件夹命名为components; 

2.选中components，右键，新建组件，注意，目录名必须命名为components，右键选项才会有新建组件选项

组件命名有两种方式：1.驼峰式命名：UserInfo；2.短横给连接式命名:user-info; 

在UserInfo/User-info.vue添加如下代码：

<template><view><image src="/static/logo.png" mode=""></image><view class="username">Jim</view></view>
</template>

注意：组件里的页面不能直接访问，需要主页面中引入组件的方式来读取组件里页面的内容

二.组件的使用

<template><view><image src="/static/logo.png" mode=""></image><view class="username">Jim</view></view>
</template><script setup></script><style lang="scss" scoped></style>

 在上面组件中，style中使用了scoped，起的作用是style里的css样式仅作用于本组件，不会污染其他组件。

效果：