微信小程序中使用公共组件

子组件

// commonPop.wxml
<view class="commonPop" hidden="{{!isShow}}">
  <view class="mask" bindtap="hideDialog"></view>
  <view class="btn_area">
    <view class="items" data-id="{{items.id}}" bindtap="choose" 
    	wx:for="{{btnList}}" wx:for-item="items" wx:key="items.id">
    	{{items.name}}
    </view>
  </view>
</view>

// commonPop.json
{
  "component": true,
  "usingComponents": {}
}

/* commonPop.wxss */
.commonPop {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.commonPop .mask {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
}
.commonPop .btn_area {
  width: 90%;
  min-height: 165rpx;
  background-color: #fff;
  position: absolute;
  z-index: 2;
  bottom: 40rpx;
  border-radius: 16rpx;
}

.commonPop .btn_area .items {
  text-align: center;
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 0.5rpx solid #ccc;
}

.commonPop .btn_area .items:last-child {
  border-bottom: none;
}

// commonPop.js
Component({ 
  options: { 
    multipleSlots: true // 在组件定义时的选项中启用多slot支持 
  }, 
  /** 
   * 组件的属性列表 
   * 用于组件自定义设置 
  */ 
  properties: {
    
  }, 
  /** 
   * 私有数据,组件的初始数据 
   * 可用于模版渲染 
   */ 
  data: { // 弹窗显示控制 
    isShow: false,
    btnList: [
      { id: 1, name: '拍照' },
      { id: 2, name: '从相册中选取' },
      { id: 3, name: '取消' }
    ]
  }, 
  /**
   * 组件的方法列表 
   * 更新属性和数据的方法与更新页面数据的方法类似 
  */ 
  methods: { 
    /** 
    * 公有方法 
    */
    //隐藏弹框 
    hideDialog() { 
      this.setData({ 
        isShow: !this.data.isShow 
      }) 
    }, 
    //展示弹框 
    showDialog() { 
      this.setData({ 
        isShow: !this.data.isShow 
      }) 
    },
    choose(e) {
      let id = e.target.dataset.id
      this.triggerEvent('choose', id)
    }
  } 
})

父组件

// father.wxml
<commonPop id="dialog" bind:choose="choose"></commonPop>

// father.json
{
  "usingComponents": {"commonPop": "/pages/commonPop/commonPop"}
}

onReady() {
    this.dialog = this.selectComponent("#dialog")
},
 showDialog() {
    this.dialog.showDialog();
},
choose(val) {
    let id = val.detail
    if (id == 3) {
      this.dialog.hideDialog();
    } 
}