uniapp怎么封装组件（uniapp封装接口）

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

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

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

2、新建index.vue 页面

1. <template>
2. <viewclass="container">
3. <!--组件引用-->
4. <card:resData="backendData"></card>
5. </view>
6. </template>
8. <script>
9. exportdefault{
10. data(){
11. return{
12. backendData:[]
13. }
14. },
15. onLoad(){
16. this.initData();
17. },
19. methods:{
20. asyncinitData(){
22. //通过请求获取数据给页面的数据赋值
23. this.backendData=res.data.list;
24. }
25. }
26. }
27. </script>
29. <stylelang="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. importcardfrom'@/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

如果您对该产品感兴趣，请填写办理（客服微信：xiaoxiongyidong）

您的姓名 *

身份证号码 *

手机号码 *

选择地区 *

详细地址 *

留言备注 *