微信小程序组件篇——让你的开发efficient

image.png

image.png

项目中会遇到这种常见的需求，且但项目中多次遇到的情况很多。为了高效开发，重复利用我觉得是时候造个轮子了
小程序中封装组件和vue差不多

image.png

布局直接略过

子组件

样式忽略

Component({
  /**
   * 组件的属性列表
   */
  properties: {
  },

  /**
   * 组件的初始数据
   */
  data: {
    isModeBox:true
  },

  /**
   * 组件的方法列表
   */
  methods: {
    tageMode(){
      this.setData({
        isModeBox: !this.data.isModeBox
      })
    },
    a(n){
      console.log(n)
    }
  }
})

父组件

json文件
{
  "usingComponents": {
    "modeBox":"../../../components/modeBox"
  }
}

显示

 btn(){
    this.modeBox.tageMode()//调用子组件方法
    this.modeBox.a('122331')//通过传参的方式传递数据，如果有更好的方式或者问题可以交流学习
  },
  onReady() {
    this.modeBox = this.selectComponent('#modeBox')  //获取子组件的方法
  }