Partage d'expérience en matière de développement de composants Vue

Cet article partage principalement avec vous l'expérience de développement de composants Vue. J'espère que ces idées de développement de composants Vue pourront aider tout le monde.

Cognition existante (idée fausse)

Généralement, lorsqu'il s'agit de composants, la première chose à laquelle je pense, ce sont les fenêtres contextuelles, et le le reste est vide.
Parce que je pense qu'il s'agit de la fonction la plus couramment utilisée dans le projet, les composants doivent être extraits pour une réutilisation facile~

Cependant, j'ai découvert qu'il y avait un problème avec cette idée.
J'ai découvert que j'avais peut-être confondu les composants de Vue avec les composants de la bibliothèque UI (fenêtres pop-up, etc.). . .

Pensée liée (Illumination)

est issue d'un développement récent de formulaire. Il y a deux options sur la page qui sont des menus liés.
La première chose qui me vient à l'esprit est que ce style est exactement le même que le menu de liaison pour sélectionner une adresse~
(C'est absurde, bien sûr, le style de l'interface utilisateur doit être le même pour le même projet !)
Mais la différence c'est que c'est le mien L'un est niveau 1 et l'autre est niveau 2. Celui avec l'adresse est niveau 4.

Puis j'y ai réfléchi. Le composant de cette adresse a été importé et utilisé, et j'ai découvert qu'il s'agissait d'un niveau 4 codé en dur

À ce moment fois, je n'ai pensé qu'à deux façons
1, qui ont été réécrites en options de niveau 1 et options de niveau 2. 2 composants de l'option (semblent relativement faibles)
2, se réfèrent au composant de liaison à 4 niveaux, réécrit. en option facultative à 1 niveau ou en option à 2 niveaux (un peu gênant, je dois tester si l'adresse a été modifiée par moi)
3, réécrire un menu qui peut être utilisé universellement et à l'infini (commodément facultatif)

Finalement, j'en ai choisi 3 et je l'ai réalisé moi-même.

Quant à la raison pour laquelle 2 n'est pas intégré, la principale considération est que la logique des pages métiers où se trouvent ces deux composants présente également quelques différences :
1 La logique d'obtention la liste peut être différente, et c'est une opération ponctuelle. Que ce soit pour obtenir le niveau 4 ou seulement pour obtenir le niveau 1 ou 2 à chaque fois,
Si vous n'êtes pas sûr de cela, vous devrez y faire face lors de sa réalisation. dans un composant commun (extraire de force les parties communes est très gênant)
2 C'est l'option directe Oui, l'adresse passe à une nouvelle page puis clique sur l'option contextuelle
Je peux transmettre des données. composants parent-enfant, et l'adresse que l'on utilise vuex (pas parent-enfant, saute la page)
Bref, le coût de mise en œuvre et le coût de maintenance sont élevés, et la complexité La valeur n'est pas si élevée. . . (Basé sur l'utilisation)

équivaut à deux pages ayant chacune un composant avec le même style et une logique différente.
Ce sont complètement deux composants~
Copiez leurs parties de style commun et implémentez leur logique métier à l'intérieur de chacune.
Les deux composants sont placés dans des sections différentes et sont indépendants l'un de l'autre pour une gestion et une maintenance faciles.

Mettre à jour les connaissances (obtenir)

À ce stade, cela sera clair lorsqu'il sera combiné avec le diagramme de composants vue
Pour le développement de composants
Diviser pour régner (propre logique métier) est plus important que la réutilisation (même logique) !
Une logique métier complexe est plus pratique pour implémenter la création de composants avec vuex~

Je comprends donc que les composants composant doivent généralement faire référence à une cohésion élevée et un faible couplage (un phper m'a dit Un terme professionnel , je ne sais pas si c'est la bonne façon de l'utiliser~

Recommandations associées :

Explication détaillée des composants Vue et du transfert de données

Explication détaillée du composant Alerte de vue

Explication détaillée des exemples Salon de discussion pour la communication entre parent et enfant dans le composant vue

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!