前端：Uniapp封装组件用法

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

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

1. <template>   
2.     <view class="list"v-for="item in resData"> 
3.         <view class="item" @tap="$toPage(item.url)"> 
4.             <view class="title text-ellipsis">{{item.title}}</view> 
5.             <view class="content flex-row"> 
6.                 <view class="info"> 
7.                     <view class="summary">{{item.digest}}</view> 
8.                     <view class="flex-row"> 
9.                         <text class="date">{{item.publishDate}}</text> 
10.                         <text class="views">{{item.viewCount}} 阅读</text> 
11.                     </view> 
12.                 </view> 
13.                 <view class="cover"> 
14.                     <image class="img" :src="item.imgUrl"></image> 
15.                 </view> 
16.             </view> 
17.         </view>              
18.     </view> 
19. </template> 
20.  
21. <script> 
22.      
23.     export default { 
24.     propsData:{ 
25.         resData:[] /*接收传递的参数*/ 
26.     } 
27.     } 
28. </script> 
29.  
30. <style lang="scss" scoped> 
31. .item{ 
32.     padding: 30rpx; 
33.     margin-bottom: 30rpx; 
34.     background-color: #FFF; 
35.      
36.     .title{ 
37.         font-weight: bold; 
38.         padding-bottom: 30rpx; 
39.         border-bottom: 2rpx solid #F5F5F5; 
40.     } 
41.      
42.     .content{ 
43.         padding-top: 30rpx; 
44.         align-items: flex-start; 
45.          
46.         .info{ 
47.             width: calc(100% - 160rpx); 
48.              
49.             .summary{ 
50.                 color: #777; 
51.                 height: 80rpx; 
52.                 font-size: 24rpx; 
53.                 line-height: 1.6; 
54.                 margin-bottom: 10rpx; 
55.                 @include text-ellipsis(2); 
56.             } 
57.              
58.             .date{ 
59.                 font-size: 24rpx; 
60.                 color: $main-color; 
61.                 opacity: 0.6; 
62.             } 
63.              
64.             .views{ 
65.                 color: #999; 
66.                 font-size: 24rpx; 
67.             } 
68.         } 
69.          
70.         .cover{ 
71.             width: 140rpx; 
72.             height: 120rpx; 
73.              
74.             .img{ 
75.                 width: 100%; 
76.                 height: 100%; 
77.                 border-radius: 4rpx; 
78.             } 
79.         } 
80.     } 
81. } 
82. </style> 

2、新建index.vue 页面

1. <template> 
2.     <view class="container"> 
3.         <!--组件引用--> 
4.         <card :resData="backendData" ></card>        
5.     </view> 
6. </template> 
7.  
8. <script> 
9.     export default { 
10.         data() { 
11.             return { 
12.                 backendData: [] 
13.             } 
14.         }, 
15.         onLoad() { 
16.             this.initData(); 
17.         }, 
18.  
19.         methods: { 
20.             async initData() { 
21.                
22.                 //通过请求获取数据给页面的数据赋值               
23.                 this.backendData = res.data.list;        
24.             } 
25.         } 
26.     } 
27. </script> 
28.  
29. <style lang="scss" scoped> 
30. </style> 

3、组件引用方式

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

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

Vue.component('card',card)

2）、局部注册方式

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

传统的引用方式：

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

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

原文链接：https://mp.weixin.qq.com/s/vfJga-rc3Gt-9FNy5ZD6Ow