介绍
在uni-app
的开发当中, 经常会遇到:项目中某一个模块的页面里存在着相同的功能包括样式, 这个时候 , 可以将重复的模块封装成一个组件, 然后直接调用, 一定程度上减少了代码的冗余, 如下:
效果图
需求背景
在产品的介绍,分类等模块上, 这些页面的布局, 样式等都是类似的, 所以,在这里将它们封装成一个组件, 然后在页面当中, 直接调用。
实现步骤
- 在当前项目当中, 新建一个
component
文件夹, 这个文件夹专门用来存放我们要使用的组件, 然后在component
文件夹下右击, 新建文件夹introduce
, 这里就是我们要用的组件的文件夹, 再右击introduce
文件夹, 选择新建component , 然后直接输入introduce
即可, 如下所示:
- 组件的代码部分
<template name="introduce">
<view>
<view class="introduce">
<view class="introduce_title">{{title}}</view>
<view class="introduce_content">
{{content}}
</view>
</view>
</view>
</template>
<script>
export default {
name: "introduce",
// 组件属性
props: ["title","content"]
}
</script>
<style>
.introduce {
padding: 20rpx 80rpx;
border: 1rpx dashed #666;
}
.introduce_title {
font-size: 38rpx;
font-weight: bold;
line-height: 120rpx;
color: #333;
text-align: center;
}
.introduce .introduce_content {
color: #5F6B82;
font-size: 26rpx;
padding: 10rpx 30rpx;
}
</style>
- 页面使用组件, 代码如下:
<template>
<view class="index">
<!-- 使用组件 -->
<introduce :title="getTitle" :content="getContent"></introduce>
</view>
</template>
<script>
// 引用组件
import introduce from "../../components/introduce/introduce.vue"
export default {
// 注册自定义组件
compontents: {
introduce,
},
data() {
return {
getTitle: "产品简介",
getContent: "产品是指做为商品提供给市场,被人们使用和消费,并能满足人们某种需求的任何东西,包括有形的物品、无形的服务、组织、观念或它们的组合。产品一般可以分为五个层次,即核心产品、基本产品、期望产品、附加产品、潜在产品。",
}
}
}
</script>
这样, 一个组件就封装完成了, 在页面进行调用的时候, 在与之对应的数据上进行修改就可以了. 主要的结构,样式等都会保持一致~~~