Explication détaillée de la fonction v-model dans Vue3 : application de la liaison de données bidirectionnelle

Avec le développement continu de la technologie front-end, Vue, en tant que framework front-end populaire, est également constamment mis à jour et itéré. La dernière version, Vue3, introduit de nombreuses nouvelles fonctionnalités, la rendant plus pratique et plus flexible à utiliser.

Parmi elles, la fonction v-model est l'une des nouvelles fonctionnalités à mentionner dans Vue3. Il peut réaliser une liaison de données bidirectionnelle, c'est-à-dire que lors de l'utilisation de la fonction v-model, il peut non seulement réaliser facilement la communication entre les composants parent et enfant, mais également lier automatiquement les données saisies par l'utilisateur aux données du composant. Ensuite, cet article fournira une explication détaillée de la fonction v-model dans Vue3 et explorera son utilisation dans des applications pratiques.

1. Utilisation de base de la fonction v-model

Dans Vue3, l'utilisation de base de la fonction v-model ne change pas beaucoup par rapport à celle de Vue2. Pour une balise d'entrée ordinaire, nous pouvons utiliser la fonction v-model dans la balise pour implémenter une liaison de données bidirectionnelle.

Par exemple, dans le code suivant :

<template>
  <div>
    <input v-model="message" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "",
    };
  },
};
</script>

Nous définissons d'abord une donnée appelée message dans data. Ensuite, nous utilisons la fonction v-model dans la balise d'entrée pour lier dans les deux sens les données saisies par l'utilisateur aux données. De cette manière, lorsque l'utilisateur saisit des données dans la zone de saisie, les données seront automatiquement synchronisées avec le message dans data. Lorsque nous utilisons message, nous pouvons également le restituer directement sur l'interface.

2. Fonction v-model dans les composants personnalisés

Dans certains cas, nous devons utiliser des composants personnalisés et appliquer un v-model à ces composants. Dans Vue3, nous pouvons implémenter la fonction v-model dans un composant personnalisé en ajoutant l'option model au composant.

Par exemple, dans le code suivant :

<template>
  <div>
    <my-input v-model="message"></my-input>
  </div>
</template>

<script>
import MyInput from "./MyInput.vue";

export default {
  components: {
    MyInput,
  },
  data() {
    return {
      message: "",
    };
  },
};
</script>

Nous utilisons un composant personnalisé my-input dans le modèle et le lions au message dans data. Ensuite, dans le composant personnalisé, nous devons ajouter une option de modèle :

<template>
  <input :value="value" @input="$emit('update:value', $event.target.value)" />
</template>

<script>
export default {
  props: ["value"],
};
</script>

Dans le composant personnalisé, nous spécifions la valeur comme accessoire du composant et transmettons la valeur saisie par l'utilisateur via $emit('update:value', $ event .target.value) l'événement est mis à jour en valeur. Si nous utilisons la fonction v-model pour lier un composant personnalisé, Vue transmettra automatiquement la valeur de $vnode.model dans le composant en tant qu'accessoire et combinera la valeur de $emit('update:propName', value) avec $ La propriété vnode.model.sync est liée. Ensuite, nous allons vous montrer comment utiliser la fonction v-model dans un composant personnalisé.

<template>
  <div>
    <my-input v-model="message"></my-input>
  </div>
</template>

<script>
import MyInput from "./MyInput.vue";

export default {
  components: {
    MyInput,
  },
  data() {
    return {
      message: "",
    };
  },
};
</script>

Dans le composant MyInput, nous ajoutons une option de modèle pour mettre à jour la valeur en valeur. La valeur de cette valeur sera reçue du composant parent lorsque le composant est initialisé et mise à jour à mesure que les entrées de l'utilisateur changent.

Lorsque nous utilisons v-model dans le composant parent pour lier le composant personnalisé, Vue générera automatiquement du code pour lier le composant aux données du composant parent.

<my-component v-model="foo"></my-component>

Après cela, nous pouvons non seulement lire et utiliser facilement le composant personnalisé dans le composant parent, mais également réaliser une liaison bidirectionnelle des données.

3. Application du modèle V dans les formulaires

Les formulaires sont une partie très importante de notre développement front-end. Dans Vue3, la fonction v-model fournit également une méthode d'implémentation très pratique. Nous pouvons utiliser la fonction v-model pour lier automatiquement les données du formulaire à l'état du composant, réalisant ainsi des opérations de formulaire très pratiques et efficaces.

Par exemple, dans le code suivant :

<template>
  <div>
    <form>
      <label>名字：</label>
      <input v-model="name" />
      <br />
      <label>年龄：</label>
      <input v-model="age" />
    </form>

    <div>
      <h3>您的名字是：{{ name }}</h3>
      <h3>您的年龄是：{{ age }}</h3>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      age: "",
    };
  },
};
</script>

Nous pouvons voir que dans ce code, nous utilisons la fonction v-model pour lier la balise d'entrée dans le formulaire. Lorsque l'utilisateur saisit avec succès les données dans la zone de saisie, Vue3 enregistre automatiquement les données dans l'état du composant et les met à jour. Et lorsque nous affichons l'état du composant dans l'interface via une liaison à double parenthèse, nous pouvons lire directement les données enregistrées dans v-model.

En bref, dans Vue3, la fonction v-model peut non seulement réaliser une liaison de données bidirectionnelle entre les composants parent et enfant, mais également lier facilement les données du formulaire à l'état du composant, obtenant ainsi un résultat rapide, efficace et opération pratique. Par conséquent, l'utilisation de la fonction v-model dans Vue3 peut nous permettre de développer des projets front-end plus efficacement et d'améliorer notre niveau d'application dans le développement front-end.

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!