微信小程序自定义组件

因为项目中有几次用到商品列表，为了实现直接重复利用，使用自定义组件。

1. 首先在子组件js中配置item

 properties: {

    /**
     * 组件的初始数据
     */

    item:Object,
  },

2. 在子组件wxml中创建组件

    <view class="gooditem">
      <image class="img" src="{{item.cover}}" bindtap="ToDetail" data-item='{{item}}' />
      <view class="good_name">{{item.name}}</view>
      <view class="good_price">{{item.minPrice}}</view>
      <view class="good_bottom">
        <view class="old_price">{{item.maxNativePrice}}</view>
        <view class="good_sell">已售{{item.saleNum}}</view>
      </view>
    </view>

3. 在父组件json中引入组件

   "goods_list":"../component/goods_list/goods_list",

4. 最后在父组件wxml中使用即可

<goods_list item="{{item}}"  wx:for="{{GoodList}}" bindtoDetail="ToDetail"/>

5. 因为要通过点击跳转具体页面，所以会用到父子组件通信，在子组件js利用triggerEvent中传值

  /**
 1. 组件的方法列表
   */
  methods: {
    ToDetail:function(e){
      console.log(e);
    this.triggerEvent('toDetail', e.currentTarget.dataset.item) 
    }
  }

6. 此时父组件在wxml中定义方法，js中即可收到值

ToDetail(e){
  console.log(e);
  const id=e.detail.id
  }