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
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
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"
}
}<view>我是组件A</view>子组件内容：
Component({
behaviors: [],
properties: {
paramAtoB:String
},
data: {
}, // 私有数据，可用于模版渲染
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },
methods: {
}
})<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>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
})
}
}
})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>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: {
}
}){
"component": true,
"usingComponents": {}
}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>子组件内容：
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: {
}
})<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});
}
}
})
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
