Detaillierte Erläuterung von V-Modell-Instanzen in Komponenten

Die Magie des V-Modells

---

html

<div id="app">
 <input v-model="poin">
  {{ poin }}</div>

js

new Vue({
  el:'#app',
  data:{poin:'zqz'
  }})

Sobald sich der von uns eingegebene Wert ändert, ändert sich auch der Punktwert in den Daten.

Theoretisch wird ein Ereignis ausgelöst, wenn sich der Wert in den Daten ändert, aber wir haben es nicht gesehen?

wird tatsächlich in der Vue-Dokumentation erklärt:

<input v-model="something">

ist der folgende syntaktische Zucker

<input v-bind:value="something" v-on:input="something = $event.target.value">

Der Das input-Ereignis wird bei jeder Eingabe ausgelöst und die Eingabe ist an die Inline-Funktion gebunden, wodurch sich der Wert von something ändert.

Sind Sie neugierig, was das Eingabeereignis ist?

Wenn sich der Wert des Elements d5fd7aea971a85678ba271703566ebfd oder 4750256ae76b6b9d804861d8f69e79d3 ändert, wird das DOM-Eingabeereignis synchron ausgelöst. (Bei Eingabeelementen mit Typ = Kontrollkästchen oder Typ = Radio wird das Eingabeereignis nicht ausgelöst, wenn der Benutzer auf das Steuerelement klickt, da sich das Wertattribut nicht ändert.) Wenn sich der Inhalt ändert, wird es außerdem im Editor des Contenteditable ausgelöst. In diesem Fall ist das Ereignisziel das Edit-Host-Element. Wenn es zwei oder mehr Elemente mit contenteditable true gibt, ist der „Edit Host“ das nächstgelegene Vorgängerelement, dessen übergeordnetes Element nicht editierbar ist. Ebenso wird es auch auf das Stammelement des designMode-Editors ausgelöst.

Einzelheiten finden Sie unter: MDN-Eingabeereignis

V-Modell in der Komponente

---

V-Modell-Validierungsprinzip der Komponente

• Akzeptiert ein value-Attribut

• Löst das value-Ereignis aus, wenn es ein neues input

uns Schauen Sie sich zuerst den Code an

el-input.vue

d477f9ce7bf77f53fbcf36bec1b69b7a

    dc6dce4a544fdca2df29d5ac0ea9906b
      e388a4556c0f65e1904146cc1a846beeinput的封装94b3e26ee717c64999d7867364b1b4a3
      1813ca81a5bc6e5e4d9e4db5cb03ae09
    16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a

export default {
  name: 'el-input',
  props: {
    value: {
      type: Number,
      default: 0
    },
  },
  methods: {
    // 每次都会加一
    updateValue (value) {
      this.$refs.input.value = value + 1;
    },
    selectAll(event) {
      setTimeout(function () {
        event.target.select()
      }, 0)
    }
  }
}

2cacc6d41bbb37262a98f745aa00fbf0
c9ccee2e6ea535a969eb3f532ad9fe89
531ac245ce3e4fe3d50054a55f265927

Verwenden Sie diese Komponente in Tom.vue

c9ccee2e6ea535a969eb3f532ad9fe89
531ac245ce3e4fe3d50054a55f265927
d477f9ce7bf77f53fbcf36bec1b69b7a
    102ab924d89e509a93751c12855efd5b
    dc6dce4a544fdca2df29d5ac0ea9906b
      581b752f8958e789522d96089d885571da9236a413cd032428793817d58785c2
    16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
import vElInput from './el-input.vue'

export default {
  name: 'tom',
  components: {
    vElInput
  }
}

2cacc6d41bbb37262a98f745aa00fbf0

Jedes Mal, wenn es verwendet wird, wird am Ende eine 1 hinzugefügt

Aber die Frage ist, wie bekommen wir diesen Wert in Tom.vue?

• Methode 1: Verwenden Sie Ereignisse, aber es fühlt sich etwas gekrümmt an, um das Land zu retten

• Methode 2: Verwenden Sie das V-Modell

Dies zeigt die Leistungsfähigkeit des V-Modells, da der obige syntaktische Zucker das

-Ereignis automatisch bindet. Wir können diese Funktion also nutzen, um etwas zu tun. input

V-Modell an die Komponente binden

Ändern Sie den Code von Tom.vue

d477f9ce7bf77f53fbcf36bec1b69b7a
    102ab924d89e509a93751c12855efd5b
    dc6dce4a544fdca2df29d5ac0ea9906b
      42df839a2e7b33d0a8a98a26e44f5e5dda9236a413cd032428793817d58785c2
      eleValue的值:{{ this.eleValue }}
    16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
import vElInput from './el-input.vue'

export default {
  name: 'tom',
  components: {
    vElInput
  },
  data () {
    return {
      eleValue: 666 //设置一个默认值
    }
  }
}

2cacc6d41bbb37262a98f745aa00fbf0

Anfangszustand

Das Zustand nach der Eingabe

Wenn sich dann der von uns eingegebene Wert ändert, ändert sich der

, den wir erwartet haben, immer noch nicht, aber der Wert in el-input.vue ändert sicheleValue

bedeutet das Der Wert wird nach der Änderung nicht an die übergeordnete Komponente übertragen (synchronisiert). Dies ist der Zweck von

in vue1, wurde jedoch in vue2 aufgegeben. .sync

Ändern Sie den el-input.vue-Code und fügen Sie

this.$emit('input', value*1)

...updateValue (value) {  this.$refs.input.value = value + 1;  // 触发组件上绑定的input事件,以实现value同步  this.$emit('input', value*1)},...

hinzu, um eine Wertesynchronisierung zu erreichen.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von V-Modell-Instanzen in Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!