Heim > Web-Frontend > js-Tutorial > Hauptteil

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

php中世界最好的语言
Freigeben: 2018-04-11 17:30:04
Original
1414 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!