Bases de Vue : Explorer le modèle Provide/Inject de Vue

Vous pouvez utiliser différentes méthodes pour la communication des composants et la gestion de l’état dans Vue.js. Explorons le modèle de fourniture et d’injection, qui permet le flux de données entre les composants sans perçage d’accessoires.

Vue.js offre une variété d’approches pour la communication des composants et la gestion des états. Parmi ceux-ci, le fournir/injecter pattern se distingue par son efficacité dans la gestion du flux de données entre les composants, en contournant la méthode conventionnelle de « perçage d’hélices ». Ce modèle est particulièrement avantageux dans les applications complexes, offrant un moyen rationalisé de gérer l’état au niveau de l’application.

Dans cet article, nous examinerons le modèle provide/inject de Vue, juxtaposé à la manière dont il joue un rôle lors de la création de formulaires avec l’outil Progress. Interface utilisateur Kendo pour Vue bibliothèque de composants.

Accessoires

Lors de la gestion des données entre les composants parents et enfants, Vue nous donne la possibilité d’utiliser quelque chose appelé accessoires pour transmettre les données du parent à l’enfant. Les accessoires ne peuvent circuler que dans une seule direction, des composants parents vers les composants enfants (et plus bas). Lorsque des changements d’état se produisent sur les éléments parents, Vue restituera les composants qui dépendent de ces valeurs.

Cette méthode, bien que simple pour les arborescences de composants superficielles, devient lourde et moins maintenable à mesure que l’application se développe et que la hiérarchie des composants s’approfondit. Considérons un scénario dans lequel nous avons un ParentComponent qui doit transmettre des données à travers plusieurs niveaux de composants enfants :

ParentComponent → ChildComponent1 → ChildComponent2 → ChildComponent3 → etc

Dans de tels cas, chaque niveau de composant doit déclarer et transmettre explicitement les accessoires, ce qui entraîne une augmentation du code standard et de la complexité. Ce processus, parfois appelé « forage d’accessoires », peut rendre l’application plus difficile à comprendre et à maintenir, en particulier lorsque les données doivent être partagées entre de nombreux composants ou lorsque les composants sont profondément imbriqués.

Le modèle fournir/injecter dans Vue est un moyen de transmettre des données via une arborescence de composants sans devoir transmettre des accessoires à tous les niveaux. Cela peut être très utile pour réduire la complexité et améliorer la maintenabilité dans les applications avec des hiérarchies de composants profondes ou lorsqu’il est nécessaire de partager des données entre des composants qui ne sont pas directement liés, tels que des frères et sœurs ou des descendants profondément imbriqués.

Fournir/Injecter

Le modèle provide/inject permet à un composant ancêtre de servir de fournisseur de dépendances pour tous ses composants descendants, quelle que soit leur profondeur d’imbrication dans l’arborescence des composants.

Regardons un exemple simple utilisant l’API de composition de Vue 3 avec le <script setup> syntaxe. Dans cet exemple, un composant parent fournira une donnée et un composant enfant injectera ces données pour son utilisation.

Nous demanderons au composant parent d’utiliser le fournir() fonction de l’API de composition de Vue pour fournir une donnée (message) qui peut être injecté par n’importe quel composant descendant dans l’arborescence des composants. Le premier argument à provide() est une clé unique (messageKey dans ce cas) que les composants enfants utiliseront pour injecter ces données.

<template>
  <ChildComponent />
</template>
 
<script setup>
import { provide } from 'vue';
import ChildComponent from './ChildComponent.vue';
 

const message = 'Hello from Parent';
 

provide('messageKey', message);
</script>

Dans le composant enfant, nous pouvons utiliser le injecter() fonction pour accéder aux données fournies par un composant ancêtre. L’argument à inject() est la clé unique qui a été utilisée dans le composant parent pour fournir les données (messageKey).

<template>
  <p>{{ message }}</p>
</template>
 
<script setup>
import { inject } from 'vue';
 

const message = inject('messageKey');
</script>

Enfin, le fichier d’application principal restituera le ParentComponent en tant que composant racine de notre application Vue.

import { createApp } from 'vue';
import ParentComponent from './components/ParentComponent.vue';
 
const app = createApp(ParentComponent);
 
app.mount('#app');

Avec cet exemple, l’application rendue affichera une interface simple où le ChildComponent accède et affiche directement le message « Bonjour du parent » à l’aide du modèle fournir/injecter.

Ce comportement serait le même même si le composant enfant se trouvait à plusieurs niveaux en dessous du composant parent dans l’arborescence des composants. Le modèle fournir/injecter permet aux données de « sauter » les composants intermédiaires, les rendant directement accessibles à tout descendant, quelle que soit leur profondeur d’imbrication.

Cette capacité de transmission de données est particulièrement utile pour les hiérarchies de composants profondes où la transmission d’accessoires à travers chaque couche serait peu pratique et fastidieuse.

Interface utilisateur Kendo pour Vue Form

En développant les bases présentées dans la section précédente, explorons comment le modèle de fourniture/injection de Vue joue un rôle important dans un scénario plus complexe : créer un formulaire à l’aide des composants de l’interface utilisateur Kendo dans une application Vue.

Kendo UI fournit une suite de Composants Vue hautement personnalisables et faciles à intégrer dans les applications Vue. Pour notre exemple, nous allons construire un formulaire qui utilise Kendo UI pour les composants Vue en se concentrant sur les champs de saisie pour la soumission des données utilisateur.

En particulier, nous souhaiterons que notre formulaire :

• Affichez une validation au niveau du champ lorsqu’un e-mail invalide est saisi.
• Désactivez le bouton Soumettre jusqu’à ce que tous les champs obligatoires soient correctement remplis et validés.
• Lorsque le formulaire est soumis avec succès, un message d’alerte s’affichera pour informer l’utilisateur que le formulaire a été soumis avec succès.

Nous allons construire la majorité du formulaire avant d’explorer comment les modèles provide/inject nous permettent d’accéder à l’état et aux données du formulaire dans les composants imbriqués.

Avant de commencer, installons d’abord les éléments nécessaires @progress/kendo-vue-form emballer. Nous installerons également certains packages supplémentaires que nous utiliserons dans notre formulaire, tels que @progress/kendo-vue-inputs, @progress/kendo-vue-labels et @progress/kendo-vue-boutons.

npm install @progress/kendo-vue-form @progress/kendo-vue-inputs @progress/kendo-vue-labels @progress/kendo-vue-buttons @progress/kendo-drawing @progress/kendo-svg-icons @progress/kendo-vue-intl @progress/kendo-theme-default @progress/kendo-licensing

Entrée de formulaire

Pour commencer, nous allons d’abord construire un FormInput Le composant doit être un champ de saisie de formulaire avec un retour de validation, ce qui en fait un composant réutilisable dans notre formulaire qui nécessite une validation. Le <script> La section du composant ressemblera à ce qui suit :

<script setup>
import { ref, computed, defineProps, defineEmits } from 'vue';
import { FieldWrapper } from '@progress/kendo-vue-form';
import { Error, Label } from '@progress/kendo-vue-labels';
import { Input } from '@progress/kendo-vue-inputs';


const { touched, validationMessage } = defineProps({
  touched: Boolean,
  label: String,
  validationMessage: String,
  id: String,
  valid: Boolean,
  value: String
});


const emit = defineEmits(['change', 'focus']);
const showValidationMessage = computed(() => touched && validationMessage);


const handleChange = (e) => {
  emit('change', e);
};


const handleFocus = (e) => {
  emit('focus', e);
};
</script>

Dans le <script setup> section de la FormInput composant, nous définissons un composant Vue à l’aide de l’API Composition. Nous importons le FieldWrapper, Error, Label et Input composants de Kendo UI pour Vue que nous utiliserons pour nous aider à structurer nos éléments de formulaire et nos messages. Nous définissons des accessoires pour gérer les attributs des champs de formulaire et employons un computed propriété pour contrôler l’affichage des messages de validation. À travers le setup fonction, nous spécifions et renvoyons des méthodes émettrices d’événements comme handleChange() et handleFocus() qui aident à permettre l’interaction avec les composants parents.

Le modèle du composant ressemblera à ceci :

<template>
  <FieldWrapper>
    <Label :class="'k-form-label'" :editor-id="id" :editor-valid="valid">
      {{ label }}
    </Label>
    <div class="k-form-field-wrap">
      <Input
        :valid="valid"
        :id="id"
        :value="value"
        @input="handleChange"
        @focus="handleFocus"
      />
      <Error v-if="showValidationMessage">
        {{ validationMessage }}
      </Error>
    </div>
  </FieldWrapper>
</template>

Dans le modèle, nous définissons la structure visuelle du FormInput composant, utilisant Kendo UI pour les composants Vue pour l’étiquetage et les champs de saisie et affichant dynamiquement un message de validation basé sur l’état du composant (par exemple, si un message de validation existe, affichez-le).

Contenu du formulaire

Ensuite, nous allons créer le FormContent composant pour structurer l’ensemble de notre formulaire et implémenter la logique de validation nécessaire. Dans le <script setup> extrait, nous établirons le FormContent composant, intégrant Kendo UI pour les composants Vue et le personnalisé FormInput composant que nous avons créé. Nous définirons une fonction de validation des e-mails à l’aide d’une expression régulière pour garantir que les entrées de l’utilisateur correspondent au format de l’e-mail. Cette fonction sera mise à disposition dans le contexte du composant, permettant son utilisation pour la validation des champs email.

<script setup>
import { ref } from 'vue';
import { Field, FormElement } from '@progress/kendo-vue-form';
import FormInput from './FormInput.vue';
import { Button } from '@progress/kendo-vue-buttons';


const emailRegex = new RegExp(/\S+@\S+\.\S+/);


const emailValidator = (value) =>
  emailRegex.test(value) ? '' : 'Please enter a valid email.';
</script>

Dans le modèle du composant, nous organiserons les champs de saisie pour le nom et l’e-mail dans un fieldseten utilisant la coutume FormInput composant pour chaque champ. Le email le champ sera spécifiquement associé au emailValidator pour fournir un retour immédiat sur la validité des entrées. Un bouton de soumission, contrôlé par l’état de validation du formulaire, est inclus pour lancer la soumission du formulaire uniquement lorsque le formulaire est valide.

<template>
  <form-element>
    <fieldset>
      <div>
        <field :name="'name'" :component="'myTemplate'" :label="'Name'">
          <template v-slot:myTemplate="{ props }">
            <form-input
              v-bind="props"
              @change="props.onChange"
              @blur="props.onBlur"
              @focus="props.onFocus"
            />
          </template>
        </field>
      </div>
      <div>
        <field
          :name="'email'"
          :type="'email'"
          :component="'myTemplate'"
          :label="'Email'"
          :validator="emailValidator"
        >
          <template v-slot:myTemplate="{ props }">
            <form-input
              v-bind="props"
              @change="props.onChange"
              @blur="props.onBlur"
              @focus="props.onFocus"
            />
          </template>
        </field>
      </div>
    </fieldset>
    <div class="k-form-buttons">
      <kendo-ui-button type="submit">
        Submit
      </kendo-ui-button>
    </div>
  </form-element>
</template>

Dans le modèle du composant racine de notre application, nous afficherons le FormContent composant, et nous devrons nous assurer que nous enveloppons notre FormContent composant dans l’interface utilisateur Kendo pour Vue Formulaire composant. Cette encapsulation garantit que notre formulaire bénéficie de l’interface utilisateur Kendo pour les capacités d’intégration et de style transparentes de Vue tout en conservant la structure et la logique de validation définies dans le FormContent composant.

<template>
  <Form>
    <FormContent />
  </Form>
</template>

<script setup>
import { Form } from '@progress/kendo-vue-form';
import FormContent from './FormContent.vue';
</script>

Nous pouvons améliorer la configuration de notre formulaire en incluant une méthode pour gérer la soumission du formulaire. Le composant parent (kendo-ui-form) fournit l’état du formulaire et un handleSubmit() méthode, que les composants enfants peuvent utiliser. Avec ça handleSubmit() nous déclencherons une alerte contextuelle à chaque fois que cette fonction sera exécutée (c’est-à-dire lorsque le formulaire sera soumis).

<template>
  <Form @submit="handleSubmit">
    <FormContent />
  </Form>
</template>

<script setup>


export default {
  
  methods: {
    handleSubmit(dataItem) {
      alert(JSON.stringify(dataItem, null, 2));
    },
  },
};
</script>

Fournir/Injecter et KendoForm

Notre formulaire est pour l’essentiel complet, sauf qu’il ne gère pas la possibilité de désactiver le bouton de soumission lorsque le champ de courrier électronique du formulaire n’est pas valide.

Pour y parvenir, dans le FormContent composant, nous devons trouver un moyen d’accéder à une propriété Kendo UI pour Vue Form afin de déterminer si le formulaire est dans un état valide. Dans le cas contraire, nous désactiverons sous condition le bouton de soumission.

<template>
  <FormElement>
    <fieldset>
      
    </fieldset>
    <div class="k-form-buttons">
      <Button type="submit" :disabled=...>
        Submit
      </Button>
    </div>
  </FormElement>
</template>

En emballant notre FormContent avec le composant Kendo UI Form, nous permettons une intégration transparente avec Kendo UI pour les mécanismes de validation de formulaire et de gestion d’état de Vue. Pour accéder aux propriétés transmises par l’interface utilisateur Kendo pour Vue Form, nous pouvons injecter le kendoForm objet dans le FormContent composant.

<script setup>

import { inject } from 'vue';

const kendoForm = inject('kendoForm', { default: () => ({}) });

</script>

Avec l’interface utilisateur Kendo pour les propriétés Vue Form disponibles dans le composant, nous sommes alors en mesure d’exploiter diverses propriétés d’état du formulaire telles que :

• autoriserSoumettre: Détermine si le formulaire est valide et peut être soumis.
• modifié: Indique si l’un des champs du formulaire a été modifié depuis le rendu initial.
• soumis: Indique si le formulaire a été soumis avec succès.
• touché: Indique si l’un des champs du formulaire a été interagi avec l’utilisateur.
• et beaucoup plus.

Pour notre cas d’utilisation, nous utiliserons principalement le allowSubmit propriété pour désactiver dynamiquement le bouton de soumission. Cela garantit que le formulaire ne peut être soumis que lorsque tous les champs sont valides, améliorant ainsi l’expérience utilisateur en empêchant la soumission d’un e-mail incomplet ou invalide.

<template>
  <FormElement>
    <fieldset>
      
    </fieldset>
    <div class="k-form-buttons">
      <Button type="submit" :disabled="!kendoForm.allowSubmit">
        Submit
      </Button>
    </div>
  </FormElement>
</template>

Avec ce changement, lorsque nous tentons désormais de soumettre le formulaire avec une adresse e-mail invalide, une erreur de validation au niveau du champ s’affiche, invitant l’utilisateur à saisir correctement une adresse e-mail valide.

Si nous devions saisir une adresse e-mail valide, le formulaire serait soumis avec succès et la notification d’alerte prévue apparaîtrait.

Testez l’exemple ci-dessus en utilisant ce qui suit Lien StackBlitz. Notez que nous n’utilisons pas le <script setup> sucre synthétique dans cette version StackBlitz de l’application.

La possibilité d’injecter des données de formulaire Kendo UI pour Vue dans n’importe quel composant imbriqué dans le composant Vue Form offre des avantages significatifs, en particulier dans les applications complexes avec des arborescences de composants approfondies. Cette approche simplifie la gestion des états et le partage de la logique de validation entre les composants, garantissant que l’état et le contrôle du formulaire (tels que la validation, le statut de soumission et les états des champs de formulaire) sont gérés de manière centralisée et facilement accessibles.

Conclure

En conclusion, le modèle Provide/Inject de Vue présente une méthode puissante pour gérer et partager l’état entre des arborescences de composants complexes, réduisant ainsi le besoin de forage d’accessoires et améliorant la maintenabilité des applications. Lorsqu’ils sont combinés avec des composants d’interface utilisateur riches, comme ceux proposés par Progress Kendo UI, les développeurs peuvent créer efficacement des applications avec des fonctionnalités de formulaire avancées. Ce mélange du système de réactivité de Vue et de la bibliothèque de composants Kendo UI pour Vue permet la création de formulaires dynamiques et conviviaux, à la fois faciles à gérer et à étendre.

Pour plus de détails, assurez-vous de consulter la documentation officielle de Vue sur fournir/injecter et l’interface utilisateur Kendo pour le composant Vue Form Documentation! Et n’oubliez pas que Kendo UI pour Vue est livré avec un essai gratuit de 30 jours, vous pouvez donc l’essayer par vous-même.

Essayez Kendo UI pour Vue