Einführung in die Komponentenkommunikation im WeChat-Applet (Codebeispiel)

Der Inhalt dieses Artikels ist eine Einführung in die Komponentenkommunikation in WeChat-Miniprogrammen (Codebeispiele). Ich hoffe, dass er für Sie hilfreich ist.

In diesem Artikel geht es hauptsächlich um die Komponentenkommunikation

(1) Übergeordnete Komponente übergibt Wert an untergeordnete Komponente:

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

übergibt title='{{title}}' an untergeordnete Komponente Parameter an Unterkomponente übergeben

Unterkomponente empfängt Parameter:

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函数接受三个值：事件名称、数据、选项值  
    }
  }
})

Methoden Bei Verwendung von Titel kann this.data.title

direkt über bind:fn=' erhalten fn 'Übergabe von Methoden

an Unterkomponenten muss auch in den Eigenschaften und Methoden eine neue Methode definieren, this.triggerEvent("fn"), um die von der übergebene Methode

(2) Die übergeordnete Komponente ruft die Daten und Methoden der Unterkomponente auf:

Zuerst die Komponente

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

im js onReady-Lebenszyklus abrufen Ich möchte eine Funktionsmethode der Unterkomponente aufrufen

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

Wenn Sie die Unterkomponentendaten aufrufen, können Sie die Unterkomponentendaten direkt über this.header.msg

abrufen

Das obige ist der detaillierte Inhalt vonEinführung in die Komponentenkommunikation im WeChat-Applet (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!