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

深碍√TFBOYSˉ_ 2022-09-14 11:17 200阅读 0赞

![63aae275184ccac66f1119891f22f77b.png][]

大家在做前端项目开发的时候，经常会遇到公用的一些页面，比如搜索、列表、商品详情卡片、评论列表等。为了提高开发效率、使代码看起来更加简洁，这个时候封装相应的组件是最好的解决方案。今天小编给大家介绍一下如何在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配置的。所以可以直接使用。

传统的引用方式：

IT技术分享社区

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

![dbdc0902c5e5f61c2e3c2d78680071f6.png][]

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

[63aae275184ccac66f1119891f22f77b.png]: /images/20220828/cc01e89833fe4fb5a844667b9eb34954.png
[dbdc0902c5e5f61c2e3c2d78680071f6.png]: /images/20220828/c8bcf2bb4ef04456803a442cf16a32a7.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzU5MjA5Njk0NQ==&mid=2247487684&idx=1&sn=008111bf1bcca6150ad6ddd48fd99711&chksm=fe25ab1ac952220cb0774f2a6da51141f901d18ca1ef6fde545376293b08dbaae45c6e671f2f&scene=21#wechat_redirect
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzU5MjA5Njk0NQ==&mid=2247487660&idx=1&sn=381729ac34ab1e36a2be82f84bb5e164&chksm=fe25ab72c952226479a3a6545a858f2918be750031b0f4bfbb6a2f308f1f736258528f57e625&scene=21#wechat_redirect
[Link 3]: http://mp.weixin.qq.com/s?__biz=MzU5MjA5Njk0NQ==&mid=2247487655&idx=1&sn=40adeb081d70c7d656dc9dd793a32ed0&chksm=fe25ab79c952226f3f517ebac72a84c789bf4d1fdd352c0219e5f7c161cd2fd07de0994e1ec8&scene=21#wechat_redirect
[51_ISP]: http://mp.weixin.qq.com/s?__biz=MzU5MjA5Njk0NQ==&mid=2247487635&idx=1&sn=f19e9834a0a76efd52aa650c14c01ced&chksm=fe25ab4dc952225bd7976f2f77ef4162779b8a57bb7358c239357fddb1303c286b2f12d8c51f&scene=21#wechat_redirect
[Link 4]: http://mp.weixin.qq.com/s?__biz=MzU5MjA5Njk0NQ==&mid=2247487633&idx=1&sn=c402ef612600d618281b5c9b4ca200c4&chksm=fe25ab4fc9522259bd0af7cf83eeb85ddc49e27be6db77fce74f8bb25cc7ba2b227e75bc0463&scene=21#wechat_redirect