So verwenden Sie das V-Modell in Vue, um die Kommunikation zwischen Eltern-Kind-Komponenten zu erreichen

vue.js ist eine Bibliothek zum Erstellen datengesteuerter Webschnittstellen. Das Ziel von Vue.js besteht darin, eine reaktionsfähige Datenbindung und zusammengesetzte Ansichtskomponenten mit einer möglichst einfachen API zu ermöglichen. Im folgenden Artikel werden hauptsächlich relevante Informationen zur Kommunikationsimplementierung von übergeordneten und untergeordneten V-Modell-Komponenten im Vue-Projekt vorgestellt.

Vorwort

In Vue-Projekten haben wir oft eine solche Anforderung. Die übergeordnete Komponente bindet das V-Modell und die Unterkomponenteneingabe Ändert den übergeordneten Wert, der an das V-Modell der Komponente gebunden ist. Vielen Freunden ist dieser Vorgang nicht ganz klar, was ein tieferes Verständnis des V-Modells erfordert. Lassen Sie uns heute über das V-Modell sprechen.

Vues bidirektionale Datenbindung

Der V-Model-Befehl kann nur in d5fd7aea971a85678ba271703566ebfd, 221f08282418e2996498697df914ce4e verwendet werden. < ;textarea> Bei diesen Formularelementen bedeutet die sogenannte Zwei-Wege-Bindung, dass die Daten in unserer Vue-Instanz in js mit dem Inhalt des gerenderten Dom-Elements übereinstimmen Die Partei wird entsprechend mit den gleichen Daten aktualisiert.

Diese Frage wird in vielen Front-End-Interviews erwähnt. Der Interviewer fragte Sie: Was ist das Prinzip der bidirektionalen Datenbindung in Vue? Natürlich ist das auch eine bekannte Frage. Sie können die Antwort überall finden, indem Sie auf Baidu suchen.

Im Allgemeinen werden Sie feststellen, dass Object.defineProperty() zur Überwachung des Datenabrufs und -satzes verwendet wird, um eine Datenentführung zu erreichen.

Wenn Sie nicht viel über Object.defineProperty() wissen, können Sie auf den Link oben klicken, um einen Blick auf die Syntax zu werfen!

Ein einfaches Beispiel:

var blog = {
 name: 'haorooms博客'
};
console.log(blog.name); // haorooms博客

Wenn Sie beim Ausführen von console.log(blog.name) direkt einen Buchtitel zum Haorooms-Blog hinzufügen möchten, was sollten Sie tun? Mit anderen Worten, was ist der Attributwert des Überwachungsobjektblogs? Dann ist Object.defineProperty( ) praktisch:

var blog= {}
var name = '';
Object.defineProperty(blog, 'name', {
 set: function (value) {
 name = value;
 console.log('欢迎来到' + value);
 },
 get: function () {
 return '《' + name + '》'
 }
})
blog.name = 'haorooms博客'; // 欢迎来到haorooms博客
console.log(blog.name); // 《haorooms博客》

Führen Sie den obigen Code aus, um den Effekt zu sehen!

Wie wird die bidirektionale Datenbindung von Vue implementiert? Es gibt auch viele Implementierungscodes im Internet, daher werde ich hier nicht zu sehr ins Detail gehen!

Verwendung des V-Modells

Oben habe ich so viel gesagt, aber es dient eigentlich der Veranschaulichung dass Vue ein einzelner Datenfluss ist, das V-Modell ist nur syntaktischer Zucker.

<input v-model="haorooms" />
<input v-bind:value="haorooms" v-on:input="haorooms= $event.target.value" />

Die erste Codezeile ist eigentlich nur syntaktischer Zucker für die zweite Zeile. Dann kann die zweite Codezeile wie folgt abgekürzt werden:

<input :value="haorooms" @input="haorooms= $event.target.value" />

Mit anderen Worten,

<input v-model="haorooms" />

kann auch als

<input :value="haorooms" @input="haorooms= $event.target.value" />

v- geschrieben werden. Modell in der Komponente Mit

ist zurück zu unserer ursprünglichen Frage? Wie kommuniziert das V-Modell zwischen übergeordneten und untergeordneten Komponenten in Vue? Wie verwende ich es in Komponenten? Wenn Sie mein Beispiel oben verstehen, können wir das V-Modell problemlos in Komponenten verwenden.

Der Code der übergeordneten Komponente lautet wie folgt:

 <template>
 <p id="demo">
 <test-model v-model="haorooms"></test-model>
 <span>{{haorooms}}</span>
</p>
</template>
<script>
  import testModel from &#39;src/components/testModel&#39;
  export default {
   data(){
      return{
         haorooms: "haorooms"
      }
    },
    components: {
      testModel,
    }
  }
</script>
<style lang="scss" scoped>
</style>

Der Code der Unterkomponente lautet wie folgt:

<template>
<span>
   <input
    ref="input"
    :value="value"
    @input="$emit(&#39;balabala&#39;, $event.target.value)"
   >
  </span>
</template>
<script>
  export default {
    data(){
      return{
      }
    },
    props: ["value"],
    model: {
      prop: &#39;value&#39;,
      event: &#39;balabala&#39;
    }
  }
</script>
<style lang="scss" scoped>
</style>

Wir können den obigen Code verwenden, um den Wert der übergeordneten Komponente zu ändern Komponenten-V-Modell-Bindung durch die Unterkomponente!

Der Implementierungs-Screenshot lautet wie folgt:

Nachteile und Lösungen des V-Modells

V-Modell ist beim Erstellen allgemeiner Komponenten wie Kontrollkästchen oder Optionsfelder nicht einfach zu verwenden.

<input type="checkbox" v-model="haorooms" />

Wir können es auf folgende Weise lösen:

<input type="checkbox" :checked="status" @change="status = $event.target.checked" />

Die übergeordnete Komponente kann wie folgt geschrieben werden:

<my-checkbox v-model="haorooms"></my-checkbox>

Untergeordnete Komponente:

<input 
        type="checkbox"
        <!--这里就不用 input 了，而是 balabala-->
        @change="$emit(&#39;balabala&#39;, $event.target.checked)"
        :checked="value"
       />
 export default {
    data(){
      return{
      }
    },
    props: [&#39;checked&#39;], //这里就不用 value 了，而是 checked
   model: {
     prop: &#39;checked&#39;,
     event: &#39;balabala&#39;
    },
  }

Die Oben habe ich für alle zusammengestellt. Ja, ich hoffe, es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

So implementieren Sie einen benutzerdefinierten Ereignismechanismus mit Javascript

Detaillierte Interpretation der Kartendatenstruktur in Javascript

So entwickeln Sie einen zweidimensionalen Wochenansichtskalender mit Javascript

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das V-Modell in Vue, um die Kommunikation zwischen Eltern-Kind-Komponenten zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!