Introduction détaillée aux composants divisés de vue.js

Cette fois, je vais vous montrer comment diviser les composants de groupe dans Vue.js, et quelles sont les précautions pour diviser les composants dans Vue.js. un cas pratique, regardons ensemble Jetez un oeil.

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 les 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. Nous pouvons les extraire et les assembler ou les 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 ?

Comment les composants Vue sont-ils implémentés ? Voyons d'abord à quoi cela ressemble dans le système de fichiers

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 l'utiliser

Présentant la communication entre les composants Vue, adhérant à un concept, vous devez d'abord enregistrer, le code dans le fichier header.vue, en supposant que nous ayons des données dedans, c'est le nom d'utilisateur, puis la méthode est dothis, on voit Il y a un attribut props et un msg est enregistré. Lorsque notre app.vue appelle le composant d'en-tête, nous pouvons directement écrire msg dans l'attribut header et transmettre toutes les données de app.vue à header.vue , toutes sont implémentées par Vue. mécanisme. 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 le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée de la pratique du projet de bucket de la famille Vue

Comment implémenter Ajax avec des requêtes asynchrones JS natives

Comment utiliser la gestion de l'état Vuex

vue2.0 sélectionne tout et inverse la sélection dans le tableau

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!