欢迎光临万书涛的个人博客

Uni-app小程序自定义组件如何制作

作者:万书涛  / 日期:2021-09-19 21:32:45 /  来源:本站原创 /   浏览:
摘要
在开发小程序过程中,会遇到一些常用和经常复用的功能,我们可以把这些功能自定义成组件,然后就可以在需要的地方复用了,非常方便,下面就来说一说如何自定义组件。  
一般建立一个组件需要经过安装、引用、注册三个步骤,而从HBuilderX 2.5.5起就不需要这些步骤了,只要组件安装在项目的components目录下或uni_modules目录下,并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册,直接在页面中使用。
 
这次我们要实现的一个功能是抓取产品列表,由于这个列表在产品页、主页、产品搜索页都会用到,所以我们要封装成组件,步骤如下:
 
 
我们打开HBuilderX,在HBuilderX的首先在HBuilderX的components目录上单击右键,选择“新建组件”如下图所示,新建一个components/Prolist/Prolist.vue组件,记住如下图3所示勾选创建同名目录。

自定义组件制作截图

组件部分代码如下:
<view class="vproitem" v-for="item in plists" :key="item.id">
<image v-bind:src="item.titlepic"></image>
<view class="vprice">
<text class="cuxiao">{{item.price}}</text>
</view>
<view class="vdes">
{{item.intro}}
</view>
</view>
 
<script>
export default {
name:"Prolist",
data() {
return {

};
},
props:['plists']

}
</script>
代码解析:上面代码第一行中的v-for="item in plists",其中的plists就来自上面代码中最后一行的props:['plists'],这个props中的参数就来源与父引用页面传递的值,比如我们通过父页面引用组件时传递一个数组,那么这个参数里面就是保存的这个数据的数据,然后就可以在组件中渲染出来了。父页面引用代码如下:
 
<Prolist :plists="goodsarr"></Prolist>

上面中的goodsarr就是父组件中的一个数组,这个数据通过方法从后台获取数据,然后保存到数组里,最后通过Prolist的“:plists”来绑定这个数组并传递给子组件,这样子组件就可以获取数组中的数据然后在父页面中渲染出来了,复用性很强。
这样就可以在很多页面通过引用Prolist组件,然后传递数据就可以显示出来了。


 
所属分类: 暂无分类
微信二维码

扫描关注微信公众号
第一时间获取最新资讯
本文由万书涛原创,地址:https://www.wtaoblog.com/wxxcx/265.html
如需转载,须以文字形式注明本文地址,否则禁止转载