Quels sont les avantages des composants vue

Avantages des composants Vue : 1. Les composants sont des unités d'organisation de code indépendantes et réutilisables. Le système de composants est l'une des fonctionnalités principales de Vue. Il permet aux développeurs de créer de grandes applications en utilisant des composants petits, indépendants et généralement réutilisables. le développement basé sur le développement peut grandement améliorer l'efficacité du développement d'applications, la testabilité, la réutilisabilité, etc. 3. Il permet au code frontal Web d'atteindre une « cohésion élevée » et un « faible couplage », transformant le processus de développement frontal en un processus de construction blocs.

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Le développement d'une seule page de Vue est en fait très simple et abstrait. Une seule page fait référence au seul exemple de Vue, qui est le nouveau Vue({}) dans main.js ;

Comment obtenir l'effet de tant de pages ? Cela repose sur le développement de composants. Chaque sous-page est composée de plusieurs composants. Lorsque l'URL change, différents groupes de composants sont actualisés et rendus. Cela permet d'obtenir l'effet de plusieurs pages. Comment implémenter les modifications d'URL dans Vue ?

Vue Componentization

Qu'est-ce que la composantisation

Lorsque nous rencontrons des problèmes complexes, il est difficile de résoudre tous les problèmes en même temps, nous devons donc à ce moment-là démonter le problème et résoudre les petits problèmes. tout cela ensemble, nous pouvons trouver la solution à ce problème. Cela semble familier ! En fait, c’est l’idée de la programmation dynamique, mais c’est la différence entre la solution optimale et la solution.

La composantisation, c'est aussi cette idée de résoudre des problèmes. Lorsque la logique fonctionnelle d'un projet est particulièrement complexe, il nous est difficile de réaliser toutes les interactions logiques en même temps, car la redondance ou l'enfer des rappels se produisent facilement une fois. une certaine partie ne va pas, il est difficile de la poursuivre. Quelle ligne de code est à l'origine du problème ? Dans le même temps, l'énergie d'une personne est limitée. Afin de réduire la pression personnelle, les problèmes sont divisés en petits modules fonctionnels, qui peuvent non seulement réduire les coûts de gestion et de maintenance de l'interface, mais également convenir au travail en équipe.

Mais en fait, le développement front-end de Vue ne nécessite pas beaucoup de personnes, car il est léger, donc dans les projets réels, les artistes n'ont qu'à envoyer le prototype conçu à un ou deux développeurs front-end. sont nécessaires aux développeurs, en grande partie parce que le développement basé sur les composants de Vue rend la logique métier plus claire.

idée de composantisation vue

• L'idée de composantisation nous permet de développer de petits composants indépendants et réutilisables pour construire nos applications.

• Chaque application (fonction) peut être résumée dans une arborescence de composants.

• Divisez autant que possible la page en composants petits et réutilisables. Cela rend notre code plus facile à organiser et à gérer, et plus évolutif.

Avantages de la composantisation de vue

1. Les composants sont des unités d'organisation de code indépendantes et réutilisables. Le système de composants est l'une des fonctionnalités principales de Vue. Il permet aux développeurs de créer de grandes applications à l'aide de petits composants indépendants et généralement réutilisables.

2. Le développement de composants peut grandement améliorer l'efficacité du développement d'applications, la testabilité, la réutilisabilité, etc. 3. Il permet au code frontal Web d'atteindre « une cohésion élevée et un faible couplage », transformant le processus de développement frontal en un processus de base.

Utilisation des composants

Principe

• L'utilisation des composants est divisée en trois étapes :
  • Créer un constructeur de composant
  • Enregistrer un composant
  • Utiliser un composant
• Créer un constructeur de composant :
  • Appeler const mycomponent = Vue.extend({template : ``}) pour créer un constructeur.
  • Écrivez le code html correspondant entre guillemets après le modèle. En fait, ce modèle est le modèle du fichier .vue (si vous n'êtes pas sûr, vous pouvez aller dans le fichier Vue pour le créer).
  • Les guillemets simples après : sont en fait de la syntaxe ES6. Comme nous le savons tous, les caractères spéciaux sont nécessaires pour envelopper les chaînes et autres contenus entre guillemets doubles. Cependant, le contenu entre guillemets simples et le code à l'intérieur ne modifiera pas le code lorsqu'il est utilisé. Format, par exemple :
    
• Enregistrer le composant :
  • Appelez Vue.component('votre propre nom de composant',moncomposant), le premier paramètre est le nom du composant que vous avez créé et le deuxième paramètre est le nom du composant que vous avez créé. La variable const lors de la création du constructeur de composant.
    
• Utilisation de composants :
  • Utilisé dans le modèle ci-dessus
    

Utilisation dans le développement réel - composants parent-enfant

• L'utilisation de composants dans le développement réel est très simple, chaque composant sont tous un fichier .vue, qui peut être utilisé en introduisant et en déclarant directement les composants.

• Première étape : Créer un fichier .vue. Ici, je crée un fichier Home.vue sous le dossier des vues

• Étape deux : Introduire le fichier Home dans le composant qui doit être utilisé. Home.vue est introduit dans App.vue Veuillez le présenter vous-même lors du développement réel.
  
  

• Étape 3 : Enregistrez le composant dans App.vue J'ai déjà mentionné les propriétés de ces composants. Les composants à l'intérieur sont les composants enfants du fichier vue. Une relation parent-enfant est formée ici. père Vous pouvez avoir plusieurs fils ! ! !
  

• Étape 4 : Utilisez ce composant, c'est-à-dire affichez le contenu de Home.vue dans App.vue
  

Les composants parent-enfant transmettent des données

• Transmettez les données aux composants enfants via des accessoires.
• Envoyez des messages aux composants parents via des événements.
  

Utilisation des accessoires parent-enfant

• Dans les composants enfants, utilisez des accessoires pour déclarer les données qui doivent être reçues du composant parent.
• Les props sont au même niveau que les données, les méthodes et les calculs, et les données envoyées depuis le composant parent y sont stockées.
• les accessoires sont divisés en deux types :
  • Le premier type : objet, l'objet peut définir le type lors du passage, et peut également définir la valeur par défaut, etc.
  • Deuxième type : formulaire de tableau de chaînes. Chaque chaîne du tableau est le nom des données transmises.
• La première situation :
  
  
  
  • Grâce à une étude précédente, vous devriez être capable de comprendre ces deux images. La déclaration de la première image est écrite dans le modèle du fichier .vue. ce sous-composant doit être patientlist, et les informations transmises au sous-composant sont en fait :weizhen="notfin", qui peut être trouvé dans la deuxième image, notfin C'est un tableau , alors qu'est-ce que Weizhen ? ? Regardez la troisième photo, j'ai défini un objet en props ! Le nom de cet objet est weizhen, patientlist，而向子组件传递的信息其实就是:weizhen="notfin"，在第二张图片中可以发现，notfin是个数组，那么weizhen是什么？？看第三张图片，我在props里定义了一个对象！这个对象的名字就是weizhen，所以这个weizhen就是父组件把向子组件传递的数据封装了一个名字！
  • 这样就实现了父组件向子组件传递数据的第二种方式，怎么动态监控父组件传来的数据是否有变化并进行刷新后期会讲！
• 第二种情况：
  • 用上面的前两张图，其实变化的就是接收的方式：
    
  • 这样也能获取到相应的数据，但其实我喜欢用第一种，因为规定了类型和默认值后能让代码更容易读懂。

子传父-this.$emit()自定义事件

• 子传父使用this.$emit(‘自己起的名称’,data)
• 这个方法有两个参数，第一个是自己起的名字，例如上面的weizhenCe weizhen est donc le nom dans lequel le composant parent encapsule les données transmises au composant enfant !

Cela réalise la deuxième façon pour le composant parent de transmettre des données au composant enfant Comment surveiller dynamiquement si les données du composant parent ont changé et les actualiser sera discuté plus tard !

Deuxième cas :

D'après les deux premières images ci-dessus, ce qui change réellement, c'est la manière de recevoir :
• 
  De cette façon, vous pouvez également obtenir les données correspondantes, mais en fait j'aime utiliser la première, car après avoir spécifié le type et la valeur par défaut, Rendre le code plus facile à lire.

• 
  

  Du fils au père - this.$emit() événement personnalisé

• Pour passer du fils au père, utilisez this.$emit('your own name', data)🎜🎜Cette méthode a deux Paramètres, Le premier est le nom que vous choisissez, comme weizhen ci-dessus ; le deuxième paramètre est les données que vous souhaitez transmettre. Ces données peuvent être traitées via la fonction du sous-composant. be Les données définies dans data. De cette manière, le composant parent peut obtenir les résultats renvoyés par le composant enfant. 🎜🎜🎜🎜Le composant parent obtient directement les données du composant enfant🎜🎜🎜🎜this.$children🎜🎜🎜🎜🎜Dans les méthodes du module de script du composant parent, si vous souhaitez obtenir directement les données du composant parent composant enfant, vous pouvez utiliser ceci $children. 🎜🎜🎜🎜Comme indiqué ci-dessous, nous utilisons $children pour obtenir la chaîne de message dans le composant enfant. 🎜🎜🎜🎜🎜🎜Inconvénients de cela.$enfants : 🎜
  • Lors de l'accès aux sous-composants via $children, il s'agit d'un type de tableau, et les sous-composants doivent être accessibles via la valeur d'index.
  • Lorsqu'il y a trop de sous-composants et que nous devons en obtenir un, nous ne pouvons souvent pas déterminer sa valeur d'indice, et elle peut même changer.

this.$ref

• ref est l'abréviation de référence.
• $ref et ref sont souvent utilisés ensemble Étapes à suivre :
  • Liez un identifiant spécifique à un sous-composant via ref.
  • Le composant est accessible via this.$refs.ID.
    
    

Le composant enfant obtient directement les données du composant parent - ceci.$parent

• Bien qu'il soit possible d'obtenir directement la valeur du composant parent de cette manière, ce n'est pas le cas Il est recommandé de l'utiliser dans la méthode de développement de projet réel, expliquons pourquoi ci-dessous :
  • Tout d'abord, les sous-composants n'ont pas besoin de beaucoup de données. Les sous-composants n'ont besoin que des données qu'ils traitent. le degré de couplage sera augmenté.
  • Deuxièmement, lors de la réutilisation de composants dans différents projets, nous utilisons ce sous-composant uniquement en fonction de nos besoins. Si nous utilisons la méthode this.$parent pour obtenir des données, alors une erreur sera signalée s'il n'y a pas de champ correspondant dans le parent. composant!
  • Enfin, si le sous-composant peut accéder librement aux données du composant parent, il nous sera très difficile de le maintenir. Si un certain champ n'est pas nécessaire plus tard, le sous-composant doit également être modifié en conséquence, ce qui le fera. augmenter les coûts de maintenance et la charge de travail. En même temps, c'est aussi une perte de temps.
• Pour résumer : il n'est vraiment pas recommandé d'utiliser $parent, mais il faut le comprendre.

Transfert de données entre composants non parents et enfants

• Vue1.x :
  • Utilisez $dispatch pour répartir les événements vers le haut.
  • Utilisez $broadcast pour diffuser les événements vers le bas.
• Vue2.x :
  • Annulez d'abord les deux méthodes dans Vue1.x.
  • Cette version utilise un bus événementiel central, qui se fait par un intermédiaire.
  • La signification de cet intermédiaire est que les deux tables dans la relation un-à-plusieurs dans la base de données ont besoin d'une table de relation pour éviter toute confusion structurelle.
• Après une série de développement et d'optimisation, Vuex a vu le jour. La solution de gestion Vuex est actuellement une fonction principale de Vue Je parlerai de Vuex séparément dans les articles suivants.

Résumé

• Les composants sont l'une des fonctions les plus importantes de Vue. Vous devriez les utiliser davantage dans le développement réel. S'il existe des composants réutilisables, utilisez-les. vous en créez un nouveau à chaque fois Le code correspondant est trop chiant !

【Tutoriels vidéo associés recommandés : Tutoriel d'introduction à vuejs, Démarrer avec le front-end Web】

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!