Liaison bidirectionnelle entre le composant parent et le composant enfant dans Vue2

Cette fois, je vais vous présenter la liaison bidirectionnelle entre le composant parent et le composant enfant dans Vue2. Quelles sont les précautions pour la liaison bidirectionnelle entre le composant parent et le composant enfant dans. Vue2. Voici quelques exemples de cas pratiques.

Récemment, j'étudie comment écrire un ensemble de composants d'interface utilisateur basés sur les données de Vue2 (composant parent) 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. utiliser Vuex causerait des problèmes aux autres utilisateurs, j'ai donc décidé de trouver une solution après avoir 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 sont nouveaux dans le framework Vue.

Logique de code du sous-composant

<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 de 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>

Après avoir modifié le sous-composant Lorsque currentValue est utilisé, $emit déclenche en fait l'événement input 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 :

L'utilisation de l'index v-for en HTML

vue des polices packagées et des ressources d'images Comment faire faire face à l'échec

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!