前端:Uniapp封装组件用法

时间:2022-06-01 20:20:23

前端: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. </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

相关文章