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

image.png
image.png

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

image.png
布局直接略过

子组件

<view class="wrap" hidden="{{isModeBox}}">
  <view class="bg"></view>
  <view class="content">
    <view class="close">
      <text catchtap="tageMode">关闭</text>
    </view>
    <view class="box">
        <image class="product"></image>
        <view class="name">产品名</view>
        <view class="introduce">产品</view>
        <view>sadsasdad.com</view>
      </view>
  </view>
</view>

样式忽略

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

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

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

父组件

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

<button bindtap="btn">显示</button>
<modeBox id="modeBox" default-value="123456z" ></modeBox>

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