El mini programa encapsula la comunicación entre componentes personalizados y componentes padre-hijo

Escriba subcomponentes (tome el cuadro emergente como ejemplo)

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);
}

Agregue la siguiente configuración al archivo json en esta página

{
    
    
  "component":true 
}

Edite la parte js del componente

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)
    }
  }
  
})

Después de escribir el componente secundario, se introduce el componente principal.

Escribe el componente principal

Primer registro en json

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

Se pueden introducir varios componentes personalizados en una página. El método de escritura es el siguiente:
"usingComponents": { "pop": "... / components / pop / infoShow", "alert": "... / components / alert / alert " } También puede registrar componentes globales, " usingComponents " en app.json : { " pop ":"… / components / pop / infoShow " }

Introducido en el archivo 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>

La parte js del componente principal:

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()去调用了
  }  
})

Hasta ahora, se encapsula un componente personalizado simple

Notas sobre componentes personalizados:

• Componente La parte de página común es Página El componente personalizado es Componente
• opciones
• datos: las constantes en el componente hijo pueden ser controladas por this.selectComponent ('# popInfo')… setData ({showPop: false}) en el componente padre
• properties es el valor pasado por el componente padre al componente hijo
• adjunto es una función de ciclo de vida
• métodos es la función encapsulada en el componente secundario. El
  componente secundario puede llamar a this.triggerEvent ('myevent', data) para activar la función del componente principal, similar a esto. $ emit ('myevents', data) in vue, los datos se pasan datos. Funciones de enlace padre e hijo mediante bind: myevent = "showStatus", que es
  equivalente a @ myevent = "showStatus" en vue.
  Acerca del ciclo de vida de los componentes: para
  
  obtener más detalles, consulte https: //developers.weixin.qq. com / miniprogram / dev / framework / custom-component /
  no se describirá en detalle aquí