在开发小程序过程中,会遇到一些常用和经常复用的功能,我们可以把这些功能自定义成组件,然后就可以在需要的地方复用了,非常方便,下面就来说一说如何自定义组件。
一般建立一个组件需要经过安装、引用、注册三个步骤,而从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组件,然后传递数据就可以显示出来了。
点赞作者()