Que sont les composants?
Le composant est l'une des caractéristiques les plus puissantes de Vue.js. Les composants peuvent étendre les éléments HTML et encapsuler le code réutilisable. À un niveau supérieur, les composants sont des éléments personnalisés et le compilateur de Vue.js y ajoute des fonctionnalités spéciales. Dans certains cas, les composants peuvent également être sous la forme d'éléments HTML natifs, étendus avec la caractéristique IS.
Cet article est une explication plus détaillée compilée par l'éditeur sur la base des documents officiels. Le code est plus complet et parfait, ce qui est très adapté aux débutants à apprendre.
Documentation officielle:
http://cn.vuejs.org/guide/components.html#u52a8_u6001_u7ec4_u4ef6
Les composants dynamiques sont décrits ci-dessous:
①simple:
Cela signifie que plusieurs composants sont placés sous un point de montage, puis ils décident lequel afficher en fonction d'une variable du composant parent, ou aucun d'entre eux n'est affiché.
② interrupteur dynamique:
Utilisez la balise du composant au point de montage, puis utilisez V-Bind: IS = ”Nom du composant” pour trouver automatiquement le nom du composant correspondant. Sinon, il ne sera pas affiché;
Pour modifier le composant monté, il vous suffit de modifier la valeur de la directive IS.
Comme dans l'exemple de code:
<div id = "app"> <bouton @ click = "toshow"> cliquez pour permettre à l'enfant afficher le composant </ bouton> <composant V-Bind: Is = "qui_to_show"> </ composant> </div> <script> var vm = new Vue ({el: '#App', data: {what_to_show: "First"}, Methods: {toshow: fonction () {// commutateur: "First"}, méthodes: {toshow: fonction () {// // Switch = Var = Methods: Methods: {ToShow: fonction () {/ / Switchs "}, Methods: {ToShow: fonction () {/ / Switchs". [First "," Second "," Third "," "]; 1 </div> "}, deuxième: {// Le deuxième modèle de composant enfant:" <div> Voici le composant enfant 2 </div> "}, troisième: {// Le troisième modèle de composant enfant:" <div> Voici le composant enfant 3 </div> "},}}); </cript>illustrer:
En cliquant sur le bouton du composant parent, il bascule automatiquement pour afficher un composant enfant (déterminé en fonction de la valeur de la variable qui_to_show).
③ Keep-Alive
En termes simples, le composant qui a été commuté (non affiché actuellement) est directement supprimé.
En regardant cet attribut des enfants dans le composant parent, vous pouvez constater que lorsque le composant enfant existe, la longueur de l'attribut est 1, et lorsque le composant enfant n'existe pas, la longueur de l'attribut est 0 (le composant enfant ne peut pas être obtenu);
Si le composant enfant doit être commuté, il est toujours nécessaire de le garder en mémoire pour éviter la réintégration de sa prochaine fois. Ensuite, vous devez ajouter l'attribut Keep-Alive à la balise de composant.
Comme code:
<div id = "app"> <bouton @ click = "toshow"> cliquez pour permettre au composant enfant afficher </fitton> <composant V-Bind: Is = "qui_to_show" keep-alive> </ composant>, les données: {what_to_show: "First"}, les méthodes: #App ' var arr = [premier "," deuxième "," troisième ","]; Template du composant enfant: "<div> Voici le composant enfant 1 </div>"}, deuxième: {// Le deuxième modèle de composant enfant: "<div> voici le composant enfant 2 </div>"}, troisième: {// Le troisième modèle de composant enfant: "<div> Voici le composant enfant 3 </ div>"},}}); </cript>illustrer:
Dans le cas initial, il n'y a qu'un seul élément (premier composant) dans l'attribut des enfants VM. $. Après avoir cliqué sur le bouton pour changer, il y a deux éléments dans l'attribut VM. $ Children. Après le changement, il y a trois éléments (les trois sous-composants sont tous conservés en mémoire).
Après cela, peu importe comment vous changez, il y aura trois éléments.
④ Activer le crochet
Autrement dit, c'est un chargement paresseux.
Par exemple, lors du lancement d'une demande Ajax, nous devons attendre un certain temps. Si nous devons charger la demande AJAX une fois la fin de sa fin, nous devons utiliser le crochet Activate.
En termes d'utilisation spécifique, Activate est un attribut au même niveau que les attributs tels que le modèle et les données. La forme est une fonction. Il y a un paramètre dans la fonction par défaut. Ce paramètre est une fonction. Le composant ne sera commuté que lorsque cette fonction sera exécutée.
Afin de prouver son chargement de retard, du côté du serveur, je définis que lorsqu'une certaine demande Ajax est lancée, elle retardera 2 secondes avant de renvoyer le contenu. Par conséquent, lorsque vous changez le composant 2 pour la première fois, vous devez attendre 2 secondes avant de changer avec succès:
<div id = "app"> <bouton @ click = "toshow"> cliquez pour permettre à l'enfant afficher le composant </ bouton> <composant V-Bind: Is = "qui_to_show"> </ composant> </div> <script> var vm = new Vue ({el: '#App', data: {what_to_show: "First"}, Methods: {toshow: fonction () {// commutateur: "First"}, méthodes: {toshow: fonction () {// // Switch = Var = Methods: Methods: {ToShow: fonction () {/ / Switchs "}, Methods: {ToShow: fonction () {/ / Switchs". [First "," Second "," Third "," "]; Template: "<div> Voici le composant enfant 1 </div>"}, deuxième: {// Le deuxième modèle de composant enfant: "<div> Voici le composant enfant 2, voici le contenu après ajax: {{bonjour}} </div>", data: function () {return {Hello: ""}}, Activer: Fonction (fait) {// Le composant Vare-Self = This Exécutionra-t-il. var self = this; $ .get ("/ test", function (data) {// je définis manuellement le retard de cet ajax à 2000 ms du côté serveur, donc je dois attendre 2 secondes avant de changer de self.hello = data; }}}); </cript>Effet de code:
【1】 Lorsque vous passez au composant 2 pour la première fois, vous devez attendre 2 secondes avant de s'afficher (car Ajax est initié);
[2] Dans le cas de Keep-Alive, lors du passage au composant 2 le second ou plus tard, il n'est pas nécessaire d'attendre; Mais le contenu AJAX doit être affiché deux secondes après la première fois qu'Ajax est lancé;
【3】 Sans Keep-Alive (il n'est pas enregistré en mémoire après le changement), vous devez toujours attendre lorsque vous passez au composant 2 la deuxième fois.
[4] Lorsque vous attendez, cela n'affecte plus la commutation (c'est-à-dire, en attendant le composant 2, cliquez sur changer à nouveau pour passer directement au composant 3);
illustrer:
【1】 L'activation ne sera exécutée que lorsque le composant est rendu pour la première fois, et la fonction ne sera exécutée qu'une seule fois (le composant apparaît retardé lorsque le composant apparaît)
【2】 Lorsqu'il n'y a pas de main-d'œuvre, chaque fois que le composant de commutateur apparaît, il sera réécrit (car le processus de détruire a été exécuté lorsqu'il a été caché avant), de sorte que la méthode d'activation sera exécutée.
Mode de transition en mode ⑤Transition
Autrement dit, laissez le composant dynamique passer à l'animation. (N'oubliez pas les instructions de la section de transition, les transitions conviennent aux composants dynamiques)
Par défaut, l'entrée et la sortie sont terminées ensemble; (Le contenu qui entre peut apparaître sous le contenu de sortie, qui se réfère au côté inférieur de l'axe y. Après la sortie, l'entrée apparaîtra dans la position correcte);
Lorsque transition-mode = ”out-in”, l'animation consiste à sortir d'abord puis à entrer;
Lorsque transition-mode = ”in-out”, l'animation est la première dans et plus tard (identique aux problèmes qui sont enclins à se produire par défaut);
Exemple de code: (Utilisation du nom de transition personnalisé et fichier animate.css)
<div id = "App"> <Button @ click = "toshow"> Cliquez pour permettre au composant de l'enfant afficher </futton> <composant V-Bind: Is = "qui_to_show" transition = "bounce" transition-mode = "out-in"> </ composant> </ div> <cript> vue.transition ("Bounce", {entervert ' }) var vm = new Vue ({el: '#App', data: {qui_to_show: "premier"}, méthodes: {toShow: function () {// Switch Component affiche var arr = ["First", "Second", "Third", ""]; var index = arr.Indexof (this.which_to_show); if (index <3) {this. 1];} else {this.which_to_show = arr [0];}}}, composants: {premier: {// data: function () {return {Hello: ""}}}, troisième: {// Le troisième modèle de composant enfant: "<div> Voici le composant enfant 3 </div>"}}}}); </cript>Ce qui précède est le composant dynamique du 12e chapitre de Vuejs introduit par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!