Explication détaillée des instances du modèle V dans les composants

La magie du v-model

---

html

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

js

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

Une fois Si la valeur que nous avons saisie change, la valeur du point dans les données changera également.

Théoriquement, un événement sera déclenché lorsque la valeur des données change, mais nous ne l'avons pas vu ?

est en fait expliqué dans la documentation de vue :

<input v-model="something">

est le sucre syntaxique suivant

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

Le L'événement input est déclenché à chaque fois que nous effectuons une saisie, et l'entrée est liée à la fonction en ligne, modifiant ainsi la valeur de something.

Êtes-vous curieux de savoir ce qu'est l'événement d'entrée ?

Lorsque la valeur de l'élément d5fd7aea971a85678ba271703566ebfd ou 4750256ae76b6b9d804861d8f69e79d3 change, l'événement d'entrée DOM est déclenché de manière synchrone. (Pour les éléments d'entrée avec type = checkbox ou type = radio, l'événement input ne se déclenchera pas lorsque l'utilisateur clique sur le contrôle car l'attribut value ne change pas.) De plus, lorsque le contenu change, il se déclenche sur l'éditeur de contenteditable. Dans ce cas, la cible de l'événement est l'élément hôte d'édition. S'il y a deux éléments ou plus avec contenteditable true, "l'hôte d'édition" est l'élément ancêtre le plus proche dont le parent n'est pas modifiable. De même, il se déclenche également sur l'élément racine de l'éditeur designMode.

Pour plus de détails, voir : Événement d'entrée MDN

v-model dans le composant

---

principe de validation du v-model du composant

• Accepte un attribut value

• Déclenche l'événement value lorsqu'il y a un nouveau input

us Jetez d'abord un œil au code

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

Utilisez ce composant dans Tom.vue

c9ccee2e6ea535a969eb3f532ad9fe89
531ac245ce3e4fe3d50054a55f265927
d477f9ce7bf77f53fbcf36bec1b69b7a
    102ab924d89e509a93751c12855efd5b
    dc6dce4a544fdca2df29d5ac0ea9906b
      581b752f8958e789522d96089d885571da9236a413cd032428793817d58785c2
    16b28748ea4df4d9c2150843fecfba68

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

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

2cacc6d41bbb37262a98f745aa00fbf0

Chaque fois qu'il est utilisé, un 1 sera ajouté à la fin

Mais la question est, comment obtient-on cette valeur dans Tom.vue ?

• Méthode 1 : Utiliser des événements mais cela semble un peu courbé pour sauver le pays

• Méthode 2 : Utiliser le v-model

Cela montre la puissance du v-model, car le sucre de syntaxe ci-dessus lie automatiquement l'événement input. Nous pouvons donc utiliser cette fonctionnalité pour faire quelque chose.

Lier le v-model au composant

Modifier le code de 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

État initial

Le état après la saisie

Ensuite, lorsque la valeur que nous saisissons change, le eleValue auquel nous nous attendions ne change toujours pas, mais la valeur dans el-input.vue change

signifie que la valeur n'est pas transférée (synchronisée) au composant parent après sa modification. C'est le but de .sync dans vue1, mais elle a été abandonnée dans vue2.

Modifiez le code el-input.vue et ajoutez this.$emit('input', value*1)

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

pour obtenir la synchronisation des valeurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!