uni-app组件封装与传值

介绍

在uni-app 的开发当中, 经常会遇到：项目中某一个模块的页面里存在着相同的功能包括样式, 这个时候 , 可以将重复的模块封装成一个组件, 然后直接调用, 一定程度上减少了代码的冗余, 如下：

效果图

需求背景

在产品的介绍,分类等模块上, 这些页面的布局, 样式等都是类似的, 所以,在这里将它们封装成一个组件, 然后在页面当中, 直接调用。

实现步骤

1. 在当前项目当中, 新建一个component文件夹, 这个文件夹专门用来存放我们要使用的组件, 然后在component文件夹下右击, 新建文件夹introduce , 这里就是我们要用的组件的文件夹, 再右击introduce 文件夹, 选择新建component , 然后直接输入introduce 即可, 如下所示：
   
2. 组件的代码部分

<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>

3. 页面使用组件, 代码如下：

<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>

这样, 一个组件就封装完成了, 在页面进行调用的时候, 在与之对应的数据上进行修改就可以了. 主要的结构,样式等都会保持一致~~~