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 <input> ou <textarea> 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

<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>

Utilisez ce composant dans 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>

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

<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>

É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!