So implementieren Sie eine bidirektionale Bindung zwischen der übergeordneten Vue2-Komponente und der untergeordneten Komponente

Dieses Mal zeige ich Ihnen, wie Sie die bidirektionale Bindung der übergeordneten Vue2-Komponente und der untergeordneten Komponente implementieren. Was sind die Vorsichtsmaßnahmen, um die bidirektionale Bindung der übergeordneten Vue2-Komponente zu implementieren? Die untergeordnete Komponente ist ein praktischer Fall.

Kürzlich habe ich untersucht, wie man eine Reihe von UI-Komponenten basierend auf Vue2 schreibt. Um eine bidirektionale Bindung zu erreichen, habe ich über die Verwendung von Vuex nachgedacht, aber nachdem ich mir andere hervorragende UI- Frameworks angesehen hatte, stellte ich fest, dass dies mit Vuex möglich wäre Anderen Benutzern Probleme bereiten, also beschloss ich, eine Lösung zu finden und habe mehrere Artikel konsultiert. Nach vielen Artikeln habe ich sie endlich gefunden.

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

Codelogik von Unterkomponenten

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

Logik des übergeordneten Komponentencodes

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

Beim Ändern des aktuellen Werts der Unterkomponente wird das Eingabe--Ereignis tatsächlich durch $emit ausgelöst und der Wert an das V-Modell des Aufrufers übergeben, wodurch eine bidirektionale Bindung erreicht wird.

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:

So implementieren Sie die Funktion zum Herunterladen von Dateien in Django

So referenzieren Sie lokale statische Bilder in Vue

Das obige ist der detaillierte Inhalt vonSo implementieren Sie eine bidirektionale Bindung zwischen der übergeordneten Vue2-Komponente und der untergeordneten Komponente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!