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
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
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='border:2px solid gray;'>
<view style='text-align:center;'>我是组件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
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='padding:20px;border:2px solid red;'>
<view style='text-align:center;'>我是组件A</view>
<view>
<view>A组件内容：</view>
<view>B组件传入参数：{{paramBtoA}}</view>
<componentB paramAtoB='我是A向B中传入的参数' 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='border:2px solid gray;'>
<view style='text-align:center;'>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
<button bindtap='change'>向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
[Entwicklung von Miniprogrammen] Übergabe von Werten zwischen Komponenten
Miniprogramm
12 mal gelesen Das Lesen dauert 10 Minuten[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>
Component({
behaviors: [],
properties: {
},
data: {
}, // 私有数据，可用于模版渲染
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
methods: {
}
}){
"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
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"
}
}<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='border:2px solid gray;'>
<view style='text-align:center;'>我是组件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='padding:20px;border:2px solid red;'>
<view style='text-align:center;'>我是组件A</view>
<view>
<view>A组件内容：</view>
<view>B组件传入参数：{{paramBtoA}}</view>
<componentB paramAtoB='我是A向B中传入的参数' bind:myevent="onMyEvent"/>
</view>
</view>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='border:2px solid gray;'>
<view style='text-align:center;'>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
<button bindtap='change'>向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});
}
}
})
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!
Mini-Programmpfaderfassung
Welche Dateitypen gibt es?
So löschen Sie Mongodb vollständig, wenn die Installation fehlschlägt
So entsperren Sie das Oppo-Telefon, wenn ich das Passwort vergessen habe
Detaillierte Erläuterung des Java-Verschiebungsoperators
So ändern Sie die Schriftfarbe in Dreamweaver
Wie tippe ich die Inschrift auf dem Münzkreis ein?
Oracle fügt Trigger-Methode hinzu
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
