À propos de la liaison bidirectionnelle du composant parent et du composant enfant dans Vue2.x (tutoriel détaillé)

Cet article présente principalement comment résoudre le problème de liaison bidirectionnelle entre Vue2. J'utilise des composants d'interface utilisateur pour mon propre usage et j'améliore mon BIG. J'ai rencontré un problème lors de la création d'un composant contenant une entrée : je ne sais pas comment le faire. obtenir une liaison bidirectionnelle entre l'entrée du composant enfant et les données de l'appelant (composant parent). J'ai pensé à utiliser Vuex, mais je ne savais pas comment l'utiliser. Après avoir regardé d'autres excellents frameworks d'interface utilisateur, j'ai trouvé. que l'utilisation de Vuex causerait des problèmes aux autres utilisateurs, j'ai donc décidé de trouver une solution après avoir consulté plusieurs articles d'experts, 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: &#39;NeIpt&#39;, 
  props: { 
   // 接收一个由父级组件传递过来的值 
   value: { 
    type: String, 
    default: function () { 
     return &#39;&#39; 
    } 
   } 
  }, 
  computed:{ 
   currentValue: { 
    // 动态计算currentValue的值 
    get:function() { 
     return this.value; // 将props中的value赋值给currentValue 
    }, 
    set:function(val) { 
     this.$emit(&#39;input&#39;, val); // 通过$emit触发父组件 
    } 
   } 
  } 
 } 
</script>

Logique de code du composant parent

Après avoir modifié le sous-composant Lorsque currentValue est utilisé, $emit déclenche l'événement d'entrée et transmet la valeur au modèle v de l'appelant, réalisant ainsi une liaison bidirectionnelle.

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

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Utiliser vue+element-ui+ajax pour implémenter une instance d'un formulaire

enregistrement vue Résumé de plusieurs façons de composants

Méthode de composant d'entrée de formulaire d'événement personnalisé Vue.js

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!