Méthode de transfert de valeur entre composants dans le développement de mini-programmes (exemple de code)

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=&#39;border:2px solid gray;&#39;>
<view style=&#39;text-align:center;&#39;>我是组件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=&#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>

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=&#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>

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});
    }
  }

})

Colonne
Li Sanzang
Détails de l'article

                                                                                            

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=&#39;border:2px solid gray;&#39;>
<view style=&#39;text-align:center;&#39;>我是组件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=&#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>

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=&#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>

Component({

  behaviors: [],

  properties: {
    paramAtoB:String
  },
  data: {

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

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

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

})

• 

  Rapport

Vous pourriez être intéressé

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!