Ces informations proviennent du document officiel: http://cn.vuejs.org/guide/components.html#u52a8_u6001_u7ec4_u4ef6
Cet article est basé sur la documentation officielle, avec des explications plus détaillées et des codes plus complets.
Autrement dit, il convient plus aux débutants à lire
①simple:
Il s'agit de placer plusieurs composants sous un point de montage, puis de décider 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:" <v> Voici le composant enfant 3 </div> "},}}); </scripteur>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 des composants de l'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 </v>"},}}); </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 pas à nouveau la commutation (c'est-à-dire en attendant le composant 2, cliquez pour 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>"}}}}); </ script>Cet article a été compilé dans le tutoriel d'apprentissage des composants frontaux "Vue.js", et tout le monde est le bienvenu pour apprendre et lire.
Pour les tutoriels sur les composants Vue.js, veuillez cliquer sur le tutoriel d'apprentissage de la composante Vue.js spéciale pour apprendre.
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.