微信小程序自定义组件Component

Component.png

自定义组件流程：

1. 明确组件需要的属性（在ComponentA - properties中声明）如

type: {
  type: Number,
  value: 1
},
name:{
  type: String,
  value: "佚名"
}

2. 在组件中使用声明的属性变量写页面（在ComponentA的wxml中）

<view wx:if="{{type == 1}}" class='box_content'>自定义组价</view>

3. 在组件中绑定事件方法（在ComponentA组件的wxml中）

<view wx:if="{{type == 1}}" class='box_content' bindtap="btnTap" data-item="{{item}}">自定义组价</view>

4. 在组件中实现事件方法（在ComponentA组件的 js - methods 中）

bindTap(e){
  let data = e.currentTarget.dataset;
  //第一个参数，是在使用页面中的绑定事件名称，要在前边加上bind，如：bindtapEvent
  this.triggerEvent('tapEvent', data.item, {});
},

5. 再要使用该组件的页面引用，使用前需要在此页面的json文件中添加

{
  "usingComponents": {
    "ComponentA": "/component/ComponentA/ComponentA",
    //...
  }
}

6. 使用ComponentA组件

<ComponentA type="{{pageType}}" name="{{pageName}}" bindtapEvent="pageTap"></ComponentA>
<button bindtap="changeData"></button>

data:{
  pageType: 1,
  pageName: "biubiubiu~"
},
//当自定义组件被点击时，此方法也会执行
pageTap(e){
  console.log(e);
  this.setData({
      pageType: e.detail.id,
      pageName: e.detail.py
  })
changeData(){
  this.setData({
      pageType: "1",
      pageName: "papapa~"
  })
},

自定义组件完成~