uniapp组件封装案例分享

1. <template> 
2.   <view class="index_list" > 
3.     <view 
4.       class="list" 
5.       v-for="(item, index) in floorDataList" 
6.       :key="index" 
7.     > 
8.       <view class="list_left"> 
9.         <view class="jf"> 
10.           {{ item.roomNm }} 
11.         </view> 
12.         <view class="sbei"> 
13.           <view class="sbei_top"> 
14.             <image 
15.               src="../../static/images/index_image/设备.png" 
16.               mode="" 
17.             ></image> 
18.             <text>设备</text> 
19.             <text class="sbei_number"> 
20.               {{ item.onlineDeviceVO.count }} 
21.             </text> 
22.           </view> 
23.           <view class="sbei_bottom"> 
24.             <image 
25.               src="../../static/images/index_image/设备.png" 
26.               mode="" 
27.             ></image> 
28.             <text>设备</text> 
29.             <text class="sbei_number"> 
30.               {{ item.alarmDeviceVO.count }} 
31.             </text> 
32.           </view> 
33.         </view> 
34.       </view> 
35.       <view class="list_right"> 
36.         <image src="../../static/images/index.png" mode=""></image> 
37.       </view> 
38.     </view> 
39.   </view> 
40. </template> 
41.  
42. <script> 
43. export default { 
44.   props: { 
45.     floorDataList: { 
46.       roomNm: { 
47.         type: String, 
48.         default: "",  
49.       }, 
50.       onlineDeviceVO: { 
51.         type: Number, 
52.         default: "",  
53.       }, 
54.       alarmDeviceVO: { 
55.         type: Number, 
56.         default: "",  
57.       }, 
58.     }, 
59.   }, 
60.   data() { 
61.     return {}; 
62.   }, 
63.  
64.   methods: { }, 
65. }; 
66. </script> 
67.  
68. <style lang="scss" scoped> 
69. @import "../../common/index/lists.scss"; 
70. </style> 

然后在父组件中引入
 

1. import lists from "../../components/lists/lists.vue" 
2. components: { 
3.      lists, 
4.   },//引入 

在view中（floorDataList是获取的数据，在父组件中获取）

 

1. <lists :floorDataList="floorDataList"></lists>