Comment utiliser les accessoires pour créer de meilleurs composants Vue

L'une des principales caractéristiques de Vue est son architecture modulaire, qui vous permet de créer des applications Web en combinant de petits composants réutilisables. Cela vous permet de mettre à jour et de maintenir facilement votre application Web.

Chaque composant de Vue peut avoir son propre ensemble de données et de méthodes, que vous pouvez transmettre à ses composants enfants avec des accessoires. Ici, vous apprendrez à utiliser les accessoires dans Vue pour transmettre des données des composants parents aux composants enfants.

Que sont les accessoires dans Vue?

Les accessoires, abréviation de "propriétés", sont des attributs personnalisés dans Vue qu'un composant parent peut transmettre à ses composants enfants.

Dans Vue, les composants parents transmettent les accessoires aux composants enfants dans un flux unidirectionnel. Cela signifie que les composants enfants peuvent uniquement lire et utiliser ces accessoires passés, mais ne peuvent pas modifier les données.

L'utilisation d'accessoires vous permet de créer des composants réutilisables que vous pouvez appliquer à l'ensemble de votre application. Les accessoires vous permettent d'économiser du temps et des efforts, car vous pouvez réutiliser des composants plutôt que de créer de nouveaux composants à partir de rien.

Comment passer des accessoires dans Vue

Passer des accessoires dans Vue est simple et différent de la façon dont vous passez accessoires dans React. Pour passer un accessoire d'un composant parent à son composant enfant dans Vue, utilisez l'option props dans le script du composant enfant.

Voici un exemple :

 Le composant enfant 
<modèle>
<div>
<h1>{{ titre }}h1>
<p>{{ message }}p>
<p>{{ adresse e-mail }}p>
div>
modèle>
<scénario>
exporter par défaut {
 nom: "Composant enfant",
 accessoires: ["title", "message", "emailAddress"],
};
scénario>

Le bloc de code ci-dessus décrit un composant enfant Vue utilisant des accessoires pour transmettre des données à partir d'un composant parent. Le composant comprend trois éléments HTML qui affichent le titre, message, et adresse e-mail propriétés avec interpolation.

Le accessoires L'option dans le composant enfant prend un tableau de propriétés. Ce tableau définit les propriétés que le composant enfant accepte du composant parent.

Voici un exemple d'un composant parent Vue transmettant des données au composant enfant avec accessoires:

 composant parent 
<modèle>
<div>
<composant enfant
 title="Bonjour le monde"
 message="Ceci est un message du composant parent"
 emailAddress="[email protected]"
 />
div>
modèle>
<scénario>
importer ChildComponent depuis "./components/ChildComponent.vue" ;
exporter par défaut {
 nom: "Composant parent",
 Composants: {
 Composant enfant,
 },
};
scénario>

Le composant parent dans le bloc de code ci-dessus transmet trois accessoires au composant enfant. Le bloc de code transmet des valeurs statiques au titre, message, et adresse e-mail accessoires.

Vous pouvez également transmettre des valeurs dynamiques à vos props avec le liaison v directif. liaison v est une directive utilisé dans Vue pour lier des données aux attributs HTML.

Voici un exemple du composant parent Vue utilisant le liaison v directive pour passer des valeurs dynamiques aux accessoires :

 composant parent 
<modèle>
<div>
<composant enfant
 :titre= "titre"
 :message= "message"
 :emailAddress= "emailAddress"
 />
div>
modèle>
<scénario>
importer ChildComponent depuis "./components/ChildComponent.vue" ;
exporter par défaut {
 nom: "Composant parent",
 Composants: {
 Composant enfant,
 },
 données() {
 retour {
 titre: "Bienvenue mon cher",
 Message: "Comment vas-tu",
 adresse e-mail: "[email protected]",
 };
 },
};
scénario>

En utilisant le liaison v directive pour transmettre des données au composant enfant, vous pouvez mettre à jour les valeurs des accessoires en fonction de l'état du composant parent. Par exemple, en modifiant le titre propriété de données dans le composant parent, la titre prop passé au composant enfant sera également mis à jour.

Cette méthode de définition des props comme un tableau de chaînes est un modèle abrégé. Chacune des chaînes du tableau représente un accessoire. Cette méthode est idéale lorsque tous les accessoires du tableau ont le même Type de données JavaScript.

Définir les accessoires en tant qu'objet dans Vue

Définir les accessoires comme un objet JavaScript au lieu d'un tableau permet une meilleure personnalisation de chaque accessoire. Définir les props comme un objet dans un composant vous permettra de spécifier le type de données attendu et la valeur par défaut de chaque prop.

De plus, vous pouvez marquer des accessoires spécifiques comme requis, déclenchant un avertissement si l'accessoire n'est pas fourni lorsque le composant est utilisé. Définir les props en tant qu'objet offre plusieurs avantages par rapport à la définition des props en tant que tableau, notamment :

1. La définition du type de données attendu et de la valeur par défaut pour chaque prop vous permet, à vous et à votre équipe de développeurs, de comprendre plus facilement comment utiliser exactement le composant.
2. En marquant les accessoires comme requis, vous pouvez détecter les erreurs tôt dans le processus de développement et fournir plus d'informations à l'équipe de développeurs.

Voici un exemple de définition d'accessoires en tant qu'objet dans un composant Vue.js :

<modèle>
<div>
<h1>{{ titre }}h1>
<p>{{ message }}p>
<p>{{ adresse e-mail }}p>
div>
modèle>
<scénario>
exporter par défaut {
 nom: "Composant enfant",
 accessoires: {
 titre: {
 type: Chaîne,
 par défaut: "Titre par défaut",
 },
 message: {
 type: Chaîne,
 par défaut: "Message par défaut",
 },
 adresse e-mail: {
 type: Chaîne,
 requis: vrai,
 },
 },
};
scénario>

Ce bloc de code est un exemple de composant Vue.js qui utilise des accessoires pour transmettre des données d'un composant parent à un composant enfant. Le bloc de code définit ces accessoires comme des objets avec un type et une valeur par défaut ou un indicateur requis.

Le bloc de code définit le titre et message accessoires comme chaînes avec un défaut valeur et la adresse e-mail prop comme un requis chaîne.

Choisissez la meilleure méthode qui convient à votre application Vue

Vous avez appris à définir les accessoires à la fois comme un tableau et un objet. Votre préférence doit correspondre aux besoins spécifiques de votre application.

Vue s'avère être un framework JavaScript très flexible. Il offre de nombreuses méthodes et options pour atteindre le même objectif avec différents avantages pour chacune des options ou méthodes avec lesquelles vous choisissez de travailler.