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

不言
Freigeben: 2018-10-29 16:55:36
nach vorne
2783 Leute haben es durchsucht

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>
Nach dem Login kopieren

ü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函数接受三个值:事件名称、数据、选项值  
    }
  }
})
Nach dem Login kopieren

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

< zu empfangen übergeordnete Komponente. 🎜> (2) Die übergeordnete Komponente ruft die Daten und Methoden der Unterkomponente auf:

Zuerst die Komponente

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

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

 // 调用子组件方法
  fn(){
    this.header.fn() //子组件的方法
  },
Nach dem Login kopieren
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!

Verwandte Etiketten:
Quelle:csdn.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage