微信小程序 组件

小程序 组件

选择components文件夹，右键，新建component，会自动生成组件文件，js/json/wxml/wxss一共四个文件。
比如，做一个自定义的选择框组件，居左是标题文字，居右是两个选择框。

my-checkbox.wxml

<view class="com-cell">
  <view class="cell-title">{{porpTitle}}</view>
  <view class="cell-right">
    <view class="my-radio-box {{checkedNum==='1'? 'checked': ''}}"
      bindtap="onTap" data-key="{{propKey}}" data-val="1">{{yes}}</view>
    <view class="my-radio-box {{checkedNum==='0'?'checked': ''}}"
      bindtap="onTap" data-key="{{propKey}}" data-val="0">{{no}}</view>
  </view>
</view>

my-checkbox.js

// components/my-checkbox.js
Component({
  // 这个设置表示组件可以使用全局样式
  options: {
    addGlobalClass: true
  },
  /**
   * 组件的属性列表
   */
  properties: {
    checkedNum: String,
    propKey: String,
    porpTitle: String
  },

  /**
   * 组件的初始数据
   */
  data: {
    yes: '有',
    no: '无'
  },
  observers: {
    'porpTitle': function (newVal) {
      // console.log(newVal)
      if (newVal.indexOf('婚姻') > -1) {
        this.setData({
          yes: '已婚',
          no: '未婚'
        })
      }
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onTap: function(e) {
      // console.log('/////', e)
      this.triggerEvent('myevent', e.currentTarget.dataset, {})
    }
  }
})

pages中使用组件的页面 home.wxml

// home.json
{
  "usingComponents": {
    "my-checkbox": "/components/my-checkbox"
  }
}

// home.wxml
<my-checkbox bindmyevent="myCheckFn" prop-key="gjj"
             checked-num="{{form.gjj}}"
             porp-title="是否缴纳公积金"></my-checkbox>

// home.js
data: {
    form: {
      money: '',
      gjj: ''
    }
  },
  myCheckFn (event) {
    let obj = Object.assign({}, this.data.form)
    let key = event.detail.key || event.target.dataset.key
    let val = event.detail.val || event.target.dataset.val
    obj[key] = val
    this.setData({
      form: obj
    })
    // console.log(event, key, val, typeof val)
  },
onMoneyTab (e) {
    // console.log(e)
    let money = e.currentTarget.dataset.money
    this.setData({
      'form.money': money
    })
  },
.......