Bidirektionale Bindung zwischen übergeordneter Komponente und untergeordneter Komponente in Vue2

Dieses Mal werde ich Ihnen die bidirektionale Bindung zwischen der übergeordneten Komponente und der untergeordneten Komponente in Vue2 vorstellen. Was sind die Vorsichtsmaßnahmen für die bidirektionale Bindung zwischen der übergeordneten Komponente und der untergeordneten Komponente? Vue2. Im Folgenden werfen wir einen Blick auf praktische Fälle.

Vor kurzem habe ich untersucht, wie man eine Reihe von UI-Komponenten basierend auf Vue2-Daten (übergeordnete Komponente) schreibt, um eine bidirektionale Bindung zu erreichen, aber nachdem ich mir andere hervorragende UI-Frameworks angesehen habe, habe ich das herausgefunden Die Verwendung von Vuex würde anderen Benutzern Probleme bereiten, daher beschloss ich, eine Lösung zu finden, nachdem ich mehrere Artikel gelesen hatte, und schließlich fand ich sie.

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

Codelogik der Unterkomponente

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

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 './NeIpt' 
 export default { 
  name: 'form-index', 
  data () { 
   return { 
    test: '' 
   } 
  }, 
  components: { 
   NeIpt 
  } 
 } 
</script>

Nach dem Ändern der Unterkomponente Wenn currentValue verwendet wird, löst $emit tatsächlich das Eingabe--Ereignis aus, um den Wert an das V-Modell des Aufrufers zu übergeben und so eine bidirektionale Bindung zu erreichen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

Die Verwendung von V-for-Index in HTML

vue-gepackte Schriftarten und Bildressourcen Anleitung mit Misserfolgen umgehen

Das obige ist der detaillierte Inhalt vonBidirektionale Bindung zwischen übergeordneter Komponente und untergeordneter Komponente in Vue2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!