Comment implémenter le composant personnalisé de V-model dans Vue ?

Vue.js est un framework JavaScript open source très populaire dans le domaine du développement front-end moderne. Il simplifie de nombreux problèmes dans le processus de développement front-end et facilite le développement d'applications complexes grâce à la composantisation.

L'une des fonctionnalités très utiles est d'implémenter facilement la liaison de données bidirectionnelle dans les composants à l'aide de la directive v-model. Bien que Vue.js fournisse de nombreux composants d'entrée intégrés, si vous avez besoin d'un composant d'entrée personnalisé, vous pouvez implémenter un composant personnalisé de modèle v pour répondre à vos besoins.

Cet article expliquera comment utiliser les composants personnalisés de Vue.js pour implémenter v-model.

Comment fonctionne le v-model

Dans le monde de Vue.js, le v-model n'est pas magique. En fait, il s'agit simplement d'un sucre syntaxique qui nous permet de définir la valeur du composant d'entrée et d'écouter ses changements en une seule fois. Sous le capot, le modèle V fait quelque chose, mais il n’est pas nécessaire de comprendre ces détails.

Dans un composant d'entrée avec v-model, nous pouvons utiliser un accessoire et un événement pour implémenter le comportement de v-model. prop reçoit la valeur du composant parent et la transmet au composant enfant. L'événement écoute les modifications apportées à la valeur d'entrée dans le composant parent et transmet la nouvelle valeur au composant parent. Les deux sont combinés pour implémenter la liaison de données bidirectionnelle du modèle v.

Implémentation d'un composant personnalisé

Pour utiliser v-model, nous devons définir un accessoire nommé value et un événement nommé input dans le composant. Ces deux noms sont fixes et ne peuvent être modifiés. value est la valeur du composant d'entrée et l'événement d'entrée est un événement qui informe le composant parent des modifications apportées à la valeur d'entrée.

Ce qui suit est un exemple simple de composant personnalisé qui utilise la bibliothèque de styles Bootstrap pour afficher une zone de saisie de texte :

<template>
  <div class="form-group">
    <label>{{ label }}</label>
    <input
      :id="name"
      :type="type"
      :value="value"
      :placeholder="placeholder"
      @input="$emit('input', $event.target.value)"
      class="form-control"
    />
  </div>
</template>

<script>
export default {
  name: 'MyInput',
  props: {
    name: String,
    label: String,
    value: String,
    type: {
      type: String,
      default: 'text'
    },
    placeholder: {
      type: String,
      default: ''
    }
  }
};
</script>

Il y a plusieurs points clés à noter dans ce composant :

1. Nous définissons un accessoire nommé valeur et utilisons ceci dans une zone de saisie pour initialiser la valeur de la zone de saisie. Plus tard, cet accessoire sera utilisé pour mettre à jour la valeur de la zone de saisie. L'attribut
2. @input écoute l'événement d'entrée de la zone de saisie. Cet événement est déclenché lorsque la valeur de la zone de saisie change. Nous utilisons la méthode $emit pour envoyer l'événement d'entrée au composant parent, en passant la nouvelle valeur en paramètre.

C'est tout ce dont nous avons besoin. Maintenant, si nous utilisons le composant MyInput dans un composant parent pour créer une zone de saisie, nous pouvons utiliser la directive v-model pour la liaison de données bidirectionnelle :

<template>
  <div class="container">
    <my-input v-model="name" name="name" label="Name" />
    <p>Hello, {{ name }}!</p>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    MyInput
  },
  data() {
    return {
      name: ''
    };
  }
};
</script>

Notez que nous utilisons v-model pour lier la variable name au Composant MyInput Certainement. La variable name ici est utilisée pour stocker la valeur actuelle de la zone de saisie.

Maintenant, si nous saisissons une valeur dans la zone de saisie, nous pouvons accéder à cette valeur dans le composant parent et afficher un message d'accueil. Lorsque nous tapons dans la zone de saisie, Vue.js mettra automatiquement à jour la valeur dans le composant parent et la transmettra à l'accessoire de valeur du composant MyInput.

Résumé

Dans cet article, nous avons brièvement présenté le fonctionnement de v-model dans Vue.js et démontré comment créer un composant d'entrée personnalisé pour prendre en charge v-model. En définissant la valeur prop et l'événement d'entrée, nous pouvons rendre le composant personnalisé identique au composant d'entrée intégré à l'aide de v-model et fournir un comportement personnalisé.

Cette méthode est utile si vous devez créer un composant de saisie personnalisé lors du développement d'une application. En l'utilisant, vous pouvez activer vos composants d'entrée pour la liaison de données bidirectionnelle à l'aide de v-model.

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!