Maison > Article > Applet WeChat > Méthode de transfert de valeur entre composants dans le développement de mini-programmes (exemple de code)
Méthode de transfert de valeur entre composants dans le développement de mini-programmes (exemple de code)
- 不言avant
- 2018-12-15 09:52:339748parcourir
Le contenu de cet article concerne la méthode de transfert de valeur (exemple de code) entre composants dans le développement de petits programmes. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .
1. Créer un composant
Ouvrez les outils de développement WeChat et créez un composant Quatre fichiers seront générés : wxml, wxss, js, json
Dans wxml :
<view>我是组件A</view>
En js :
Component({
behaviors: [],
properties: {
},
data: {
}, // 私有数据，可用于模版渲染
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
methods: {
}
})
En json :
{
"component": true,
"usingComponents": {}
}
C'est-à-dire que la création du composant est terminée
2. composant
Pour introduire un composant dans index, alors
est dans index.json :
{
"usingComponents": {
"componentA": "../../components/child1/child1"
}
}
dans index.wxml :
<view> <view>微信小程序组件传参</view> <componentA /> </view>
alors le composant est Il peut être affiché. Pour introduire le composant, vous devez d'abord définir le composant en json avant de pouvoir l'afficher en wxml
3 Le composant parent transmet les paramètres au composant enfant
Déclaration : Un composant est un composant parent, le composant B est un composant enfant. Voici le paramètre transmis par le composant A au composant B :
Introduire le composant B dans le composant A
Dans le json du composant A Écrivez :{
"component": true,
"usingComponents": {
"componentB": "../child2/child2"
}
} Dans le wxml du composant A, écrivez :
<view>我是组件A</view>Dans le js du composant B, écrivez :子组件内容：
Component({
behaviors: [],
properties: {
paramAtoB:String
},
data: {
}, // 私有数据，可用于模版渲染
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
methods: {
}
}) C'est-à-dire Définir le type de paramètre à transmettre du composant A dans les propriétés Écrire en wxml du composant B :
<view style='border:2px solid gray;'>
<view style='text-align:center;'>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
</view>
Résumé : Le composant A passe des paramètres au composant B, en effet, lors de l'introduction du composant B dans le composant A, apportez un attribut paramAtoB et attribuez-lui une valeur, puis le composant B obtient sa valeur via ce nom d'attribut paramAtoB
4. Le composant enfant rend compte au composant parent. Le paramètre passant déclare : Un composant est le composant parent et le composant B est le composant enfant. Voici comment le composant B transmet les paramètres au composant A : <.>Pour que le composant enfant transmette des paramètres au composant parent, vous devez d'abord Lorsque le composant parent introduit le composant enfant, ajouter un événement déclencheur, comme suit :
Dans le composant parent composant A, wxml :myevent est l'événement déclencheur lié
<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>
dans le composant parent A js :onMyEvent est la fonction lorsqu'elle est déclenchée par le composant enfant
Component({
behaviors: [],
properties: {
},
data: {
}, // 私有数据，可用于模版渲染
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
methods: {
onMyEvent:function(e){
this.setData({
paramBtoA: e.detail.paramBtoA
})
}
}
})
dans le composant enfant wxml en B : Une fois l'événement de clic sur le bouton déclenché, les paramètres peuvent être transmis dans le composant parent A, et dans le composant enfant B, js :
<view style='border:2px solid gray;'>
<view style='text-align:center;'>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
<button bindtap='change'>向A中传入参数</button>
</view>
this.triggerEvent est l'événement qui est exécuté après avoir cliqué sur le bouton. Il déclenche l'événement myevent et transmet le paramètre paramBtoA dans. le composant parent Component({
behaviors: [],
properties: {
paramAtoB:String
},
data: {
}, // 私有数据，可用于模版渲染
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
methods: {
change:function(){
this.triggerEvent('myevent', { paramBtoA:123});
}
}
})
Li Sanzang
Publié il y a 2 jours
[Développement de mini-programmes] Passage de valeurs entre composants
Mini-programme
12 fois lu Il faut 10 minutes pour lire[Développement de mini-programmes] Passage de valeurs entre les composants 1. Créez un composant Ouvrez le développeur WeChat. tools, La création d'un composant générera quatre fichiers : wxml, wxss, js, json
en wxml :
en js :en json Medium :
C'est-à-dire que la création du composant est terminée 2. Importez le composant<view>我是组件A</view>
Pour introduire le composant dans l'index, alors
Component({
behaviors: [],
properties: {
},
data: {
}, // 私有数据，可用于模版渲染
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
methods: {
}
}) est dans index.json :
{
"component": true,
"usingComponents": {}
} dans index.wxml :
alors le composant peut être affiché Pour importer le composant, vous devez d'abord définir le composant en json puis. dans wxml Affiché dans
3. Le composant parent transmet les paramètres au composant enfant
Déclaration : Un composant est le composant parent et le composant B est le composant enfant. Ce qui suit est le paramètre transmis par le composant A. au composant B :
{
"usingComponents": {
"componentA": "../../components/child1/child1"
}
}
Introduire le composant B dans le composant A
<view> <view>微信小程序组件传参</view> <componentA /> </view>
Écrire dans le json du composant A :
Écrire dans le wxml de Un composant :Écrivez dans le js du composant B :
C'est-à-dire définissez le type de paramètre à transmettre du composant A dans les propriétés Dans le wxml du composant B Écrivez :{
"component": true,
"usingComponents": {
"componentB": "../child2/child2"
}
}
<view>我是组件A</view>Résumé :子组件内容：
Un composant passe des paramètres au composant B En fait, lorsque le composant B est introduit dans le composant A, il apporte un attribut. paramAtoB et donne à Assign sa valeur, puis le composant B obtient sa valeur via ce nom d'attribut paramAtoB
Component({
behaviors: [],
properties: {
paramAtoB:String
},
data: {
}, // 私有数据，可用于模版渲染
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
methods: {
}
})4 Le composant enfant transmet les paramètres au composant parent déclare : Un composant est le parent. Le composant B est le composant enfant. Voici comment le composant B transmet des paramètres au composant A : Pour permettre au sous-composant de transmettre des paramètres au composant parent, vous devez d'abord ajouter un événement déclencheur lorsque le composant parent introduit le sous-composant, comme suit : <view style='border:2px solid gray;'>
<view style='text-align:center;'>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
</view>
Dans le composant parent A wxml :
myevent est l'événement déclencheur liéDans composant parent A js:
onMyEvent est la fonction lorsqu'elle est déclenchée par le sous-composant
<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>
Dans le sous-composant B wxml:
L'événement clic sur le bouton est déclenché, vous pouvez transmettre les paramètres dans le composant parent A, et dans le composant enfant B js :
Component({
behaviors: [],
properties: {
},
data: {
}, // 私有数据，可用于模版渲染
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
methods: {
onMyEvent:function(e){
this.setData({
paramBtoA: e.detail.paramBtoA
})
}
}
})
this.triggerEvent est l'événement exécuté après le est cliqué sur le bouton, déclenchant l'événement myevent et passant le paramètre paramBtoA dans le composant parent
<view style='border:2px solid gray;'>
<view style='text-align:center;'>我是组件B</view>
<view>A中传入的参数：{{paramAtoB}}</view>
<button bindtap='change'>向A中传入参数</button>
</view>
Component({
behaviors: [],
properties: {
paramAtoB:String
},
data: {
}, // 私有数据，可用于模版渲染
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
methods: {
change:function(){
this.triggerEvent('myevent', { paramBtoA:123});
}
}
})
-
Rapport
Commentaires
Trier par heure
Chargement...Afficher plus de commentaires
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!
Articles Liés
Voir plus- Que devez-vous apprendre pour développer des mini-programmes WeChat ?
- Résumé de la technologie de développement de programmes WeChat Mini
- Explication détaillée du changement de ville du sélecteur de ville dans le développement de l'applet WeChat
- Le développement de l'applet WeChat implémente le changement de page par onglet (TabBar en haut de la fenêtre)
- Développement d'applets Winform d'horloge de bureau CnClock
- TODO : Expérimentateur du processus de développement de mini-programmes