Comment implémenter une liaison bidirectionnelle entre le composant parent Vue2 et le composant enfant

Cette fois, je vais vous montrer comment implémenter la liaison bidirectionnelle du composant parent Vue2 et du composant enfant Quelles sont les précautions pour implémenter la liaison bidirectionnelle du composant parent Vue2 et. le composant enfant. Ce qui suit est un cas pratique.

Récemment, j'étudiais comment écrire un ensemble de composants d'interface utilisateur basés sur Vue2 Pour réaliser une liaison bidirectionnelle, j'ai pensé à utiliser Vuex, mais après avoir observé d'autres excellents frameworks d'interface utilisateur , j'ai découvert que l'utilisation de Vuex entraînerait. problème aux autres utilisateurs, j'ai donc décidé de trouver une solution et consulté plusieurs articles. Après de nombreux articles, je l'ai finalement trouvée.

Je poste la solution ici, dans l'espoir d'aider des collègues comme moi qui entrent en contact avec le framework Vue pour la première fois.

Code logique des sous-composants

<template> 
 <p class="ne-ipt"> 
  <input type="text" v-model="currentValue"> 
 </p> 
</template> 
 
<style lang="less" scoped> 
 @import "../../assets/styles/form/form.less"; 
</style> 
<script> 
 export default { 
  name: 'NeIpt', 
  props: { 
   // 接收一个由父级组件传递过来的值 
   value: { 
    type: String, 
    default: function () { 
     return '' 
    } 
   } 
  }, 
  computed:{ 
   currentValue: { 
    // 动态计算currentValue的值 
    get:function() { 
     return this.value; // 将props中的value赋值给currentValue 
    }, 
    set:function(val) { 
     this.$emit('input', val); // 通过$emit触发父组件 
    } 
   } 
  } 
 } 
</script>

Logique du code du composant parent

<template> 
 <p id="button-index"> 
  <ne-ipt placeholder="姓名" v-model="test"></ne-ipt> 
 </p> 
</template> 
<style> 
</style> 
<script> 
 import NeIpt from './NeIpt' 
 export default { 
  name: 'form-index', 
  data () { 
   return { 
    test: '' 
   } 
  }, 
  components: { 
   NeIpt 
  } 
 } 
</script>

Lors de la modification de la valeur currentValue du sous-composant, l'événement input est en fait déclenché via $emit pour transmettre la valeur au modèle v de l'appelant, réalisant ainsi une liaison bidirectionnelle.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment implémenter la fonction de téléchargement de fichiers dans Django

Comment référencer des images statiques locales dans vue

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!