uni-app 自定义组件
前面小节我们讲过 组件,一些常用组件的。像<view></view>
、<text></text>
这类的基础组件,我们可以直接使用,不需要提前定义,因为这些是系统帮我们预设好的。
但是这些系统预设的基础组件不能满足我们所有的开发需求,在 项目中,我们可以根据项目的开发需求去组件。
那如何去创建组件并且引用呢?其实有开始和结束都可以理解为组件,下面我们来具体了解一下自定的组件的创建与引用。
在 项目中,我们可以通过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>
<view>
<view class="modal-mask"></view>
<view class="modal-dialog">
<view class="modal-content">
<p>网wiki</p>
</view>
<button>授权</button>
</view>
</view>
</template>
<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>
中定义逻辑,这个根据实际开发需求来就可以了。
上面我们做了弹窗,如果想要将弹窗出来,就需要先引入组件。
比如我们想在弹窗,就需要在 pages/index/index.vue 中引入 login.vue 这个组件,下面我们来操作一下。
在 pages/index/index.vue script 下面引入并组件。
<script>
//引入组件
import Login from "components/login/login.vue"
export default {
//组件
components: {
Login
}
}
</script>
在 template 下面使用组件
<template>
<view>
<!-- 使用组件 -->
<Login></Login>
</view>
</template>
点击工具栏–运行–运行到内置浏览器,出现下面的,说明我们的组件创建并使用成功了。
到了这一步就算完成了组件的创建和引用。但有时明明成功引用了组件,但是组件却没有出来,并且也没有报错。
这种情况往往是因为新创建的组件没有被重新编译,大多数情况下,重启编译器组件就可以正常了。
使用组件可以让我们更加灵活的进行项目开发,组件可以理解为项目的个零件,我们通过组装这些零件来完成项目的开发。
在组件中,我们可以根据项目需求定义自己的和,所以组件适应的业务场景很广泛。善用组件进行开发,使我们的项目复用性更高、可维护性更强并且降低了组件之间重复性。
跟着本小节的学习,我们模拟了实际的业务场景,创建了登陆弹窗组件,并且在中引用出组件。主要了解了如何创建并引用 组件,本节课程需要掌握的知识点如下:
掌握如何在 HBuilder 开发者工具中创建组件,并理解如何在组件中填充;
了解并掌握怎样引入并组件,将组件中的在中。