Comment Vue.js divise les composants

Ce que je vous apporte cette fois, c'est comment regrouper fichiers dans Vue.js. Cet article vous donnera une bonne analyse.

Pour certaines pages communes, tout le monde peut s'asseoir ensemble et taper du code. Une fois cette page terminée, d'autres pages peuvent être créées. Cependant, en tant que système avec des fonctions complexes, notamment l'utilisation de certaines adaptées à . modularisationframework développé, cela semblera très inefficace, nous verrons donc simplement comment diviser les composants dans Vue.

En résumé, il existe deux façons de le diviser. L'une concerne les blocs fonctionnels sur la page, la sélection, la pagination et certaines parties qui nécessitent beaucoup de code pour être implémentées. regrouper ou classer. Il existe également un moyen de le diviser en fonction de la zone de page, de l'en-tête, du pied de page et de la barre latérale. Comment les composants Vue sont-ils implémentés après avoir des composants ?

APP.vue est une entrée au projet, et les composants que nous avons divisés sont également des objets Dans APP.vue, nous utilisons import pour importer chaque composant. Importer, l'en-tête fait référence au fichier header.vue à droite. Cette méthode d'écriture est une méthode d'écriture d'es6. Bien sûr, si vous n'avez pas besoin d'utiliser la composantisation es6, vous devez également utiliser un autre require. s pour écrire et exécuter un processus de packaging, si vous introduisez simplement ces deux composants dans app.vue. A l’intérieur, ces deux composants ne sont toujours pas disponibles sur la page.

Dans Vue, ce composant doit être enregistré via les composants, et le fichier importé Insérez-le, puis écrivez

et

au niveau du modèle. Après le rendu, le niveau du modèle deviendra le contenu de header.vue et footer.vue. Une chose à noter est que Vue doit être enregistrée avant de pouvoir être utilisée

Introduisons la communication entre les composants Vue En adhérant à un concept, vous devez d'abord enregistrer le code dans le fichier header.vue. nous avons Les données sont le nom d'utilisateur, et la méthode est dothis. Nous voyons qu'il y a un attribut props, et un msg est enregistré Lorsque notre app.vue appelle le composant d'en-tête, nous pouvons l'ajouter directement. l'attribut d'en-tête Écrivez msg et transmettez toutes les données de app.vue à header.vue. Tout est implémenté par le mécanisme de Vue. Si msg n'est pas écrit ici dans header.vue, les attributs ne peuvent pas être obtenus.

Je pense que vous maîtrisez la méthode après avoir lu l'introduction ci-dessus. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

À propos du push du serveur HTTP/2

Comment NVM gère les différentes versions des nœuds

Comment déterminer si la sélection CheckBox est vide

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!