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 <input> oder <textarea> ä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

< gibt 🎜>uns Schauen Sie sich zuerst den Code an

el-input.vue

<template>

    <div>
      <p>input的封装</p>
      <input type="text"
             ref="input"
             :value="value"
             @input="updateValue($event.target.value)"
             @focus="selectAll"
             >
    </div>

</template>
<script>

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

</script>
<style>
</style>

Verwenden Sie diese Komponente in Tom.vue

<style>
</style>
<template>
    <!-- 在父组件中使用 -->
    <div>
      <v-el-input></v-el-input>
    </div>

</template>
<script>
import vElInput from &#39;./el-input.vue&#39;

export default {
  name: &#39;tom&#39;,
  components: {
    vElInput
  }
}

</script>

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

<template>
    <!-- 在父组件中使用 -->
    <div>
      <v-el-input v-model="eleValue"></v-el-input>
      eleValue的值:{{ this.eleValue }}
    </div>

</template>
<script>
import vElInput from &#39;./el-input.vue&#39;

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

</script>

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!