Heim > Artikel > WeChat-Applet > Methode zur Wertübertragung zwischen Komponenten in der Miniprogrammentwicklung (Codebeispiel)

Methode zur Wertübertragung zwischen Komponenten in der Miniprogrammentwicklung (Codebeispiel)

不言nach vorne: 2018-12-15 09:52:339707Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Wertübertragungsmethode (Codebeispiel) zwischen Komponenten bei der Entwicklung kleiner Programme. Ich hoffe, dass er für Sie hilfreich ist. .

1. Erstellen Sie eine Komponente

Öffnen Sie die WeChat-Entwicklertools und erstellen Sie eine Komponente: wxml, wxss, js, json

In wxml:

<view>我是组件A</view>

in js:

Component({

  behaviors: [],

  properties: {
   
  },
  data: {
  
  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
   
  }

})

in json:

{
  "component": true,
  "usingComponents": {}
}

Das heißt, die Komponentenerstellung ist abgeschlossen

2. Stellen Sie die Komponente vor

zum Index Wenn die Komponente in index.json eingeführt wird, dann

ist in index.json:

{
  "usingComponents": {
    "componentA": "../../components/child1/child1"
  }
}

In index.wxml:

<view>
    <view>微信小程序组件传参</view>
    <componentA />
</view>

dann kann die Komponente Um die Komponente zu importieren, müssen Sie sie zunächst in json definieren, bevor sie in wxml angezeigt werden kann

3. Übergeordnete Komponente übergibt Parameter an untergeordnete Komponente.

Anweisung: Eine Komponente ist die übergeordnete Komponente und B-Komponente ist die untergeordnete Komponente, wie folgt: Komponente A übergibt Parameter an Komponente B:

Komponente B in Komponente A einführen

Schreiben Sie den JSON von ein Komponente A:

{
  "component": true,
  "usingComponents": {
    "componentB": "../child2/child2"
  }
}

Schreiben Sie in die wxml von Komponente A:

<view>我是组件A</view>

   子组件内容：

Schreiben Sie in die js von Komponente B:

Component({

  behaviors: [],

  properties: {
    paramAtoB:String
  },
  data: {

  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {

  }

})

Das heißt, definieren Sie den Parametertyp für von Komponente A in Eigenschaften übergeben werden

Schreiben Sie in die wxml der B-Komponente:

<view style=&#39;border:2px solid gray;&#39;>
<view style=&#39;text-align:center;&#39;>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
</view>

Zusammenfassung: Eine Komponente übergibt tatsächlich Parameter an die B-Komponente Komponente in A-Komponente, bringt ein Attribut paramAtoB und weist ihm einen Wert zu, und dann erhält die B-Komponente ihren Wert über diesen Attributnamen paramAtoB

4. Die untergeordnete Komponente übergibt Parameter an die übergeordnete Komponente

Aussage: Eine Komponente ist die übergeordnete Komponente, B-Komponente Als Unterkomponente übergibt Komponente B wie folgt Parameter an Komponente A:

Damit die Unterkomponente Parameter übergeben kann In der übergeordneten Komponente müssen Sie zunächst ein Triggerereignis hinzufügen, wenn die übergeordnete Komponente die untergeordnete Komponente einführt, wie folgt:

In übergeordneter Komponente A wxml:

<view style=&#39;padding:20px;border:2px solid red;&#39;>
<view style=&#39;text-align:center;&#39;>我是组件A</view>
<view>
   <view>A组件内容：</view>
   <view>B组件传入参数：{{paramBtoA}}</view>
   <componentB paramAtoB=&#39;我是A向B中传入的参数&#39; bind:myevent="onMyEvent"/>
</view>

</view>

myevent ist das gebundene Triggerereignis

In der übergeordneten Komponente A js:

Component({

  behaviors: [],

  properties: {
   
  },
  data: {

  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
    onMyEvent:function(e){
      this.setData({
        paramBtoA: e.detail.paramBtoA
      })
    }
  }

})

onMyEvent ist die Funktion, wenn sie von der Unterkomponente ausgelöst wird

In der Unterkomponente B wxml:

<view style=&#39;border:2px solid gray;&#39;>
<view style=&#39;text-align:center;&#39;>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
  <button bindtap=&#39;change&#39;>向A中传入参数</button>
</view>

Sobald das Button-Button-Click-Ereignis ausgelöst wird, können Parameter an die übergeordnete Komponente A übergeben werden. In der untergeordneten Komponente B, js:

Component({

  behaviors: [],

  properties: {
    paramAtoB:String
  },
  data: {

  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
    change:function(){
      this.triggerEvent('myevent', { paramBtoA:123});
    }
  }

})

this.triggerEvent ist das Ereignis, das nach dem Klicken auf die Schaltfläche ausgeführt wird und das myevent-Ereignis in der übergeordneten Komponente

Li Sanzang Gepostet vor 2 Tagen Methode zur Wertübertragung zwischen Komponenten in der Miniprogrammentwicklung (Codebeispiel) [Entwicklung von Miniprogrammen] Übergabe von Werten zwischen Komponenten

Miniprogramm

[Mini-Programmentwicklung] Übergabe von Werten zwischen Komponenten 1. Erstellen Sie eine Komponente Öffnen Sie den WeChat-Entwickler Tools: Beim Erstellen einer Komponente werden vier Dateien generiert: wxml, wxss, js, json

In wxml:

<view>我是组件A</view>

In js:

Component({

  behaviors: [],

  properties: {
   
  },
  data: {
  
  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
   
  }

})

In json:

{
  "component": true,
  "usingComponents": {}
}

Das heißt, die Komponentenerstellung ist abgeschlossen

2. Führen Sie die Komponente ein

Um die Komponente in den Index einzuführen, ist

in index.json:

{
  "usingComponents": {
    "componentA": "../../components/child1/child1"
  }
}

In index.wxml:

<view>
    <view>微信小程序组件传参</view>
    <componentA />
</view>

dann kann die Komponente angezeigt werden. Um die Komponente zu importieren, müssen Sie die Komponente zunächst in json definieren, bevor sie in wxml angezeigt werden kann

3. Übergeordnete Komponente übergibt Parameter an untergeordnete Komponente

Aussage: Eine Komponente ist die übergeordnete Komponente und B-Komponente ist die untergeordnete Komponente. Im Folgenden wird beschrieben, wie Komponente A Parameter an Komponente B übergibt:

Fügen Sie in Komponente A B-Komponente ein

und schreiben Sie in den JSON von A-Komponente:

{
  "component": true,
  "usingComponents": {
    "componentB": "../child2/child2"
  }
}

Schreiben Sie in die WXML von A-Komponente:

<view>我是组件A</view>

   子组件内容：

Schreiben Sie in die js der B-Komponente:

Component({

  behaviors: [],

  properties: {
    paramAtoB:String
  },
  data: {

  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {

  }

})

Das heißt, definieren Sie den Parametertyp, der von Komponente A in den Eigenschaften übergeben werden soll. Schreiben Sie in wxml der Komponente B:

<view style=&#39;border:2px solid gray;&#39;>
<view style=&#39;text-align:center;&#39;>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
</view>

Zusammenfassung:

Wenn Komponente A Parameter an Komponente B übergibt, bedeutet dies tatsächlich, dass Komponente B, wenn sie in Komponente A eingeführt wird, ein Attribut paramAtoB mitbringt und ihm einen Wert zuweist. Dann erhält Komponente B ihren Wert dadurch Attributname paramAtoB

4. Unterkomponente übergibt Parameter an übergeordnete Komponente

Deklaration: A-Komponente ist die übergeordnete Komponente, B-Komponente ist die Unterkomponente. So übergibt die B-Komponente Parameter an die A-Komponente:

Um Parameter von einer untergeordneten Komponente an eine übergeordnete Komponente zu übergeben, müssen Sie zunächst ein Triggerereignis hinzufügen, wenn die übergeordnete Komponente die untergeordnete Komponente einführt, wie folgt:

Im übergeordneten Element Komponente A wxml:

<view style=&#39;padding:20px;border:2px solid red;&#39;>
<view style=&#39;text-align:center;&#39;>我是组件A</view>
<view>
   <view>A组件内容：</view>
   <view>B组件传入参数：{{paramBtoA}}</view>
   <componentB paramAtoB=&#39;我是A向B中传入的参数&#39; bind:myevent="onMyEvent"/>
</view>

</view>

myevent ist das gebundene Triggerereignis

In der übergeordneten Komponente A ist js:

Component({

  behaviors: [],

  properties: {
   
  },
  data: {

  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
    onMyEvent:function(e){
      this.setData({
        paramBtoA: e.detail.paramBtoA
      })
    }
  }

})

onMyEvent das Funktion, wenn sie durch die untergeordnete Komponente ausgelöst wird

In der untergeordneten Komponente B, wxml:

<view style=&#39;border:2px solid gray;&#39;>
<view style=&#39;text-align:center;&#39;>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
  <button bindtap=&#39;change&#39;>向A中传入参数</button>
</view>

Sobald das Schaltflächenklickereignis ausgelöst wird, können Sie Parameter an die übergeordnete Komponente A übergeben . In der untergeordneten Komponente B ist js:

Component({

  behaviors: [],

  properties: {
    paramAtoB:String
  },
  data: {

  }, // 私有数据，可用于模版渲染

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { },
  moved: function () { },
  detached: function () { },

  methods: {
    change:function(){
      this.triggerEvent('myevent', { paramBtoA:123});
    }
  }

})

this.triggerEvent das Ereignis, das nach dem Klicken auf die Schaltfläche ausgeführt wird. Es löst das Ereignis myevent aus und übergibt den Parameter paramBtoA an die übergeordnete Komponente

Bericht

Du könnte interessiert sein

Kommentare

Nach Zeit sortieren

Laden...Weitere Kommentare anzeigen

Das obige ist der detaillierte Inhalt vonMethode zur Wertübertragung zwischen Komponenten in der Miniprogrammentwicklung (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Neuigkeiten zur Optimierung für das 10-Anfragen-Parallelitätslimit des WeChat-Applets! ! !Nächster Artikel：Neuigkeiten zur Optimierung für das 10-Anfragen-Parallelitätslimit des WeChat-Applets! ! !

In Verbindung stehende Artikel

Mehr sehen