小程序封装自定义组件及父子组件之间的通信

编写子组件（以弹出框为例）

xml

<view class="popbg" wx:if="{{showPop}}">
  <text>{{popText}}</text>
</view>

css：

.popbg{
  width: calc(80% - 2rem);
  margin: 2rem 10% 0;
  padding: 0.7rem 1rem;
  background: #fff;
  border: 1px solid rgb(0,255,0);
  text-align: center;
  border-radius: 10rpx;
  position: fixed;
  top: 0;  
  left: 0;
  z-index: 100000;
}
.popbg text{
  color:  rgb(15, 161, 40);
}

在该页面的json文件中加入以下配置

{
  "component":true 
}

编辑组件的js部分

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持 
  }, 
  /**
 - 页面的初始数据
   */
  data: {
    showPop:true
  },
  properties: {
    popText: { 
      type: String,  
      value: '组件默认内容'  
    },
  }, 
  /**
 - 在组件实例进入页面节点树时执行
   */
  attached() {
    var _this = this;
    console.log(1111)
    setTimeout(function () {
      _this.setData({ showPop: false })
      _this.handleClose()
    }, 1000)
  },
  methods:{
    handleClose(){
      console.log("处理关闭内容")
      var showStatus={msg:'已成功关闭'}
      this.triggerEvent('myevent', showStatus)
    }
  }
  
})

子组件编写好之后引入父组件

编写父组件

首先在json中注册

{
  "usingComponents": {
    "pop": "../components/pop/infoShow"
  }
}

一个页面中可以引入多个自定义组件 写法如下：
“usingComponents”: {
“pop”: “…/components/pop/infoShow”，
“alert”: “…/components/alert/alert”
}
也可以注册全局组件，在app.json中
“usingComponents”: {
“pop”: “…/components/pop/infoShow”
}

在xml文件中引入

<view class="container"> 
  <button type="primary" catchtap="clikShowPop">点击</button>
  <text style="margin-top:3rem;color:red" wx:if="{{showTips}}">{{childMsg}}</text>
  <pop id="popInfo" bind:myevent="showStatus" wx:if="{{showPop}}" popText="{{infoMsg}}"></pop>
</view>

父组件js部分：

Page({
  data: {   
    infoMsg:'',
    popInfo:'',
    showPop:false,
    showTips:false,
    childMsg:''
  },
  //点击按钮事件
  clikShowPop(){
    this.setData({
      showPop: true,
      infoMsg:'点击成功',
    })
  },
  //弹框消失时触发父组件的事件
  showStatus(e){
    // console.log(JSON.stringify(e))
    this.setData({
      showTips:true,
      childMsg: e.detail.msg  //接受子组件传递的参数时要用e.detail去接收
    })
  },
 
  onLoad() {
    this.popInfo = this.selectComponent('#popInfo')   //获取组件对象，调用子组件内部函数时就可以用this.popInfo.handleClose()去调用了
  }  
})

至此一个简单的自定义组件就封装好了

关于自定义组件的注意事项：

• Component 普通页面部分为Page 自定义组件中为Component
• options
• data：为子组件中的常量 可以由父组件中this.selectComponent(’#popInfo’)…setData({ showPop: false })来控制
• properties 为父组件向子组件传的值
• attached 为生命周期函数
• methods 为子组件中封装的函数
  子组件可以调用this.triggerEvent(‘myevent’, data)来触发父组件的函数，类似于vue中的this.$emit(‘myevents’,data),data为传递的数据 。父子间通过bind:myevent="showStatus"来绑定函数
  相当于vue中的@myevent=“showStatus”
  关于组件中的生命周期：
  
  更多详情查看https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
  此处不再详细讲述