Über die bidirektionale Bindung von übergeordneter Komponente und untergeordneter Komponente in Vue2.x (ausführliches Tutorial)

In diesem Artikel wird hauptsächlich beschrieben, wie das bidirektionale Bindungsproblem zwischen Vue2 gelöst werden kann. Ich möchte meine BIG-Komponenten ein wenig verbessern. Ich bin auf ein Problem gestoßen Ich weiß nicht, wie ich eine bidirektionale Bindung zwischen der Eingabe in der Unterkomponente und den Daten des Aufrufers (übergeordnete Komponente) erreichen kann, aber ich wusste nicht, wie ich es verwenden sollte, nachdem ich mir andere angesehen hatte Aufgrund der hervorragenden UI-Frameworks stellte ich fest, dass die Verwendung von Vuex anderen Benutzern Probleme bereiten würde, und beschloss daher, eine Lösung zu finden. Nachdem ich mehrere Artikel von Experten gelesen hatte, fand ich sie schließlich.

Ich poste die Lösung hier und hoffe, Kollegen wie mir zu helfen, die neu im Vue-Framework sind.

Die Codelogik der untergeordneten Komponente

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

Die Codelogik der übergeordneten Komponente

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

Beim Ändern des aktuellen Werts der untergeordneten Komponente löst tatsächlich das Eingabeereignis über $emit aus, um den Wert an das V-Modell des Aufrufers zu übergeben und so eine bidirektionale Bindung zu erreichen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Verwenden Sie vue+element-ui+ajax, um ein Beispiel für ein Formular zu implementieren

vue-Registrierung Zusammenfassung mehrerer Arten von Komponenten

Vue.js benutzerdefinierte Ereignisformular-Eingabekomponentenmethode

Das obige ist der detaillierte Inhalt vonÜber die bidirektionale Bindung von übergeordneter Komponente und untergeordneter Komponente in Vue2.x (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!