Introduction à la communication des composants dans l'applet WeChat (exemple de code)

Le contenu de cet article est une introduction à la communication des composants dans les mini-programmes WeChat (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Cet article parle principalement de la communication des composants

(1) Le composant parent transmet la valeur au composant enfant :

 <header title=&#39;{{title}}&#39; bind:fn=&#39;fn&#39; id=&#39;header&#39;></header>

Pass to title='{{title}}' Les sous-composants transmettent des paramètres aux sous-composants

Les sous-composants reçoivent des paramètres :

Component({
  properties: {
    title: {       // 属性名 type: Number, // 类型（必填）
      type: String,//目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
    },
    fn: {      
      type: Function,
    },
  },
  data: {
      
  },
  methods: {
    // 子组件调用父组件方法
    childFn() {
      console.log(this.data.title)
      this.triggerEvent("fn");
      //triggerEvent函数接受三个值：事件名称、数据、选项值  
    }
  }
})

méthodes Lors de l'utilisation de title, this.data.title peut directement obtenir

via bind : fn='fn ' est passé au composant enfant. La méthode

doit également être reçue dans les propriétés. Définissez une nouvelle méthode dans les méthodes. This.triggerEvent("fn") reçoit la méthode passée par le composant parent. >

(2) Le composant parent appelle les données et méthodes du sous-composant :

Récupérez d'abord le composant dans le cycle de vie js onReady du composant parent

onReady: function () {
    //获得popup组件
    this.header= this.selectComponent("#header");
},

Par exemple, pour appeler la méthode de fonction du sous-composant A

 // 调用子组件方法
  fn(){
    this.header.fn() //子组件的方法
  },

Si vous appelez directement les données du sous-composant this.header.msg, vous pouvez obtenir les données du sous-composant

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!