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

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/
  此处不再详细讲述