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