前端：uniapp封装组件用法笔记

大家在做前端项目开发的时候，经常会遇到公用的一些页面，比如搜索、列表、商品详情卡片、评论列表等。为了提高开发效率、使代码看起来更加简洁，这个时候封装相应的组件是最好的解决方案。今天小编给大家介绍一下如何在uniapp中封装组件，希望对大家能有所帮助！

1、在components目录新建card.vue 组件

<template>	
	<view class="list"v-for="item in resData">
		<view class="item" @tap="$toPage(item.url)">
			<view class="title text-ellipsis">{{item.title}}</view>
			<view class="content flex-row">
				<view class="info">
					<view class="summary">{{item.digest}}</view>
					<view class="flex-row">
						<text class="date">{{item.publishDate}}</text>
						<text class="views">{{item.viewCount}} 阅读</text>
					</view>
				</view>
				<view class="cover">
					<image class="img" :src="item.imgUrl"></image>
				</view>
			</view>
		</view>				
	</view>
</template>

<script>
	
	export default {
	propsData:{
		resData:[] /*接收传递的参数*/
	}
	}
</script>

<style lang="scss" scoped>
.item{
	padding: 30rpx;
	margin-bottom: 30rpx;
	background-color: #FFF;
	
	.title{
		font-weight: bold;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #F5F5F5;
	}
	
	.content{
		padding-top: 30rpx;
		align-items: flex-start;
		
		.info{
			width: calc(100% - 160rpx);
			
			.summary{
				color: #777;
				height: 80rpx;
				font-size: 24rpx;
				line-height: 1.6;
				margin-bottom: 10rpx;
				@include text-ellipsis(2);
			}
			
			.date{
				font-size: 24rpx;
				color: $main-color;
				opacity: 0.6;
			}
			
			.views{
				color: #999;
				font-size: 24rpx;
			}
		}
		
		.cover{
			width: 140rpx;
			height: 120rpx;
			
			.img{
				width: 100%;
				height: 100%;
				border-radius: 4rpx;
			}
		}
	}
}
</style>

2、新建index.vue 页面

<template>
	<view class="container">
		<!--组件引用-->
		<card :resData="backendData" ></card>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				backendData: []
			}
		},
		onLoad() {
			this.initData();
		},

		methods: {
			async initData() {
			  
				//通过请求获取数据给页面的数据赋值				
				this.backendData = res.data.list;		
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>

3、组件引用方式

1、全局注册方式 main.js直接导入，每个页面都可以直接调用

import card from './components/card/card.vue'

Vue.component('card',card)

2、局部注册方式

通过uniapp的easycom可以简化组件的引用，如果你创建的组件在components目录下，符合 components/组件名称/组件名称.vue 目录结构，就可以在页面直接使用，不需要在单独引用组件。uniapp默认是开启easycom配置的。所以可以直接使用。

传统的引用方式：

<script>
import cardfrom'@/components/card/card.vue' //1.vue方式导入组件
exportdefault{ components:{card}	//2.vue 方式注册组件
</script>

IT技术分享社区

个人博客网站：https://programmerblog.xyz

文章推荐程序员效率：画流程图常用的工具程序员效率：整理常用的在线笔记软件远程办公：常用的远程协助软件，你都知道吗？51单片机程序下载、ISP及串口基础知识硬件：断路器、接触器、继电器基础知识