微信小程序裏面的自定義組件，自定義組件案例，組件間傳參

微信小程序自定義組件自定義組件

（1）在根目錄下新建 components 文件夾，用來存放組件的。

新建彈框組件：如下

inviteRules.wxml文件：

<block wx:if="{{isShowInvite}}">
  <cover-view class="alert_bg" bindtap="_alertClose"></cover-view>
  <cover-view class="alert_invite_wrap">
    <cover-view class="alert_invite">
      <cover-view class="alert_invite_tit">{{title}}</cover-view>
      <cover-view class="alert_invite_txt">{{rules}}</cover-view>
      <button class="invite_btn" hover-class="none" open-type="share">{{buttonTxt}}</button>
    </cover-view>
    <cover-image src="{{iconClose}}" class="icon_close" bindtap="_alertClose"></cover-image>
  </cover-view>
</block>

inviteRules.js文件：

Component({
  data: {
    rules: '規則規則規則規則規則規則規則規則規則規則規則規則規則規則規則規則規則規則規則規則規則規則規則規則下載。',
    iconClose: 'http://xxxxx:8080/test/source1.png' //需要後端將icon_close_white放在服務器上，這個暫時用播放的
  },
  properties: {
    title: {
      type: String,
      value: '邀請獲下載券'
    },
    buttonTxt: {
      type: String,
      value: '立即邀請'
    },
    isShowInvite: {
      type: Boolean,
      value: false
    }
  },
  methods: {
    _alertClose() {
      this.setData({
        isShowInvite: false
      })
    }
  }
})

inviteRules.json文件：
 

{
  "component": true
}

inviteRules.wxss文件：

.alert_bg{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0,0,0,.8);
  z-index: 99999;
}
.alert_invite_wrap{
  width: 80%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 999999;
}
.alert_invite{
  width: 100%;
  background-color: #fff;
  border-radius: 20rpx;
  padding:50rpx;
  box-sizing: border-box;
  overflow: initial;
}
.alert_invite_txt{
  width: 100%;
  font-size: 26rpx;
  color: #444444;
  line-height: 25px;
  white-space: pre-wrap;
  margin-bottom: 75rpx;
}
.alert_invite_tit{
  font-weight: bold;
  font-size: 40rpx;
  color: #333333;
  margin-bottom: 55rpx;
}
.invite_btn{
  width: 100%!important;
  height: 80rpx;
  box-sizing: border-box;
  line-height: 80rpx;
  background: #ffcc21;
  border-radius: 50rpx;
  font-size: 30rpx;
  color: #444444;
}
.icon_close{
  width: 80rpx;
  height: 80rpx;
  margin:0 auto;
  margin-top: 80rpx;
}

--------------以上是組件文件，下面是使用組件。------------

組件的使用

組件的使用：
【.wxml文件】
<alert-invite-rules id="inviteRules" title="標題tit" buttonTxt="按鈕文字" isShowInvite="{{isShowInvite}}" />
參數說明：
  @params title  默認文案： 邀請獲下載券    非必傳
  @params buttonTxt  默認文案： 立即邀請   非必傳
  @params isShowInvite  默認false        必傳    父頁面，控制isShowInvite 的true false即可。
【.json文件】
  "usingComponents": {
      "alert-invite-rules":"/components/alert-invite-rules/inviteRules"
  },
【.js文件】
  onReady:function(){
    // 獲得該引入的組件
    var inviteRules = this.selectComponent('#inviteRules')
  },
 

index.wxml文件：

<alert-invite-rules id="inviteRules" isShowInvite="{{isShowInvite}}"/>
<button bindtap="toInviteFn">點擊展示彈框</button>

index.js文件

  onReady:function(){
    // 獲得invite-rules組件
    var inviteRules  = this.selectComponent('#inviteRules')
  },
  // 邀好友的下載券
  toInviteFn(e){
    console.log('被點擊了',e)
    this.setData({
      isShowInvite:true
    })
  },

index.json文件

{
  "usingComponents": {
   "alert-invite-rules":"/components/alert-invite-rules/inviteRules"
  },
  "navigationStyle": "custom"
}