uni-app自定义组件的创建

发布时间：2023-04-24 14:12:10 所属栏目：教程来源：

导读：在 uni-app 项目中，我们可以通过HBuilder 开发者工具新建一个后缀名为 .vue 的文件，在这个 .vue 文件中创建自定义组件。

后面将该组件通过 import 的方式导入，再在 components 中进行注册就可以像基础组件一样

在 uni-app 项目中，我们可以通过HBuilder 开发者工具新建一个后缀名为 .vue 的文件，在这个 .vue 文件中创建自定义组件。

后面将该组件通过 import 的方式导入，再在 components 中进行注册就可以像基础组件一样使用了。

创建一个自定义组件。
打开 HBuilder 开发者工具，之前创建过的项目会自动打开。在前面小节中我们创建过 imoocProjects 项目，就会出现在 HBuilder 开发者工具中的页面左侧。

展开项目目录，右键点击 components 文件夹，选择新建组件。

勾选创建同名目录，将组件命名为 login。

点击创建， components 文件夹下面会出现一个名为login的文件夹，下面有一个login.vue文件，我们打开这个文件，系统会默认帮我们创建以下代码。

实例：

<template>
<view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style>
</style>
这样一个自定义的组件就创建好了，目前这个组件还是空的，没有实质上的内容，为了方便大家更好的去了解自定义组件，我们来模拟实际开发过程中的例子，定义一下组件的内容。

模拟一个实际的业务场景：假设我们想做一个有登录权限的应用，部分页面需要用户登录后才能查看，点击这些页面时，需要弹出登录弹窗方便用户登录。如果在每个页面都写一个登录弹窗，会大大降低应用的可维护性，这时自定义弹窗就有了用武之地。

我们只需要来自定义一个登录弹窗组件，到时在页面中直接调用这个组件就可以了。

自定义登录弹窗组件
在 <template > 标签中添加组件的页面结构代码
<template>
<view>
<view class="modal-mask"></view>
<view class="modal-dialog">
<view class="modal-content">
<p>网wiki</p>
</view>
<button>授权登录</button>
</view>
</view>
</template>

在 <style> 标签中添加组件样式代码
<style>
.modal-mask {
width: ;
height: ;
position: fixed;
top: ;
left: ;
background: black;
opacity: ;
z-index: ;
}
.modal-dialog {
width: rpx;
position: fixed;
z-index: ;
background: #ffffff;
margin: -rpx rpx;
border-radius: rpx;
}
.modal-content {
display: flex;
padding: rpx rpx rpx rpx;
font-size: rpx;
justify-content: center;
}
button {
background:#feb600;
}
</style>
该组件我们只定义了页面结构代码和样式代码，页面逻辑会在组件引用的时候定义，所以没有在 <script> 标签中定义逻辑代码，这个根据实际开发需求来就可以了。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!