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
Composants - Les éléments divers sont détaillés comme suit:
① Composants et V-For
Autrement dit, les composants sont réutilisés plusieurs fois;
Par exemple, une certaine ligne dans le tableau, ou affichage de fenêtre de produit électronique (fenêtre unique), peut devenir des composants qui peuvent être réutilisés;
Écrivez simplement l'un d'eux en tant que composant, puis faites de la source de données un tableau (ou un objet, mais je pense personnellement qu'il s'agit d'un tableau). Grâce à la traversée V-FOR, chaque instance du composant peut obtenir l'un des tableau, générant ainsi tous les composants.
En raison du multiplexage, les accessoires doivent être utilisés pour lier le résultat de la traversée I et les données liées aux accessoires. La méthode de liaison est la même que la forme ordinaire et est liée dans le modèle.
Exemple de code:
<div id = "app"> <bouton @ click = "toknowchildren"> cliquez pour permettre au composant de l'enfant afficher </futton> <plow> <td> description </td> </tr> <tr> <tr> <tr> = "le tr" </div> <cript> var vm = new Vue ({el: '#App', data: {items: [1, 2, 3, 4]}, méthodes: {toknowchildren: function () {// Switch Component affiche console.log (this. $ enfants);}}, composants: {thetr: {// the First Child Component Template: "<tr>" + "<Td> {{index}} </td>" + "<td> {{id}} </td>" + "<td> Ceci est le composant enfant </td>" + "</tr>", props: ['id', 'index']}}}); </cript>illustrer:
【1】 N'oubliez pas de mettre les données à passer dans les accessoires!
【2】 Bind Index et Index $ index, car l'index commence à 0, de sorte que la colonne où l'index est situé commence à 0; Id est lié à I qui traverse les éléments, donc ID commence à 1.
[3] Vous pouvez obtenir des composants enfants à travers cela. $ Les enfants dans le composant parent (mais il est plus gênant, surtout lorsqu'il existe de nombreux composants, il est difficile à localiser);
② Écrivez des composants réutilisables:
En termes simples, il est possible qu'un composant à usage unique (utilisé ici uniquement, non réutilisé) soit étroitement couplé à d'autres composants, mais un composant réutilisable doit définir une interface publique claire. (Sinon, comment les autres l'utilisent-ils?)
Les composants réutilisables doivent essentiellement interagir avec l'extérieur, et un composant et l'interface interactive divulguée externe comprennent:
【1】 accessoires: permettez aux données de l'environnement externes d'être transmises aux composants;
【2】 Événement: permettez au composant déclencher l'action de l'environnement externe, c'est-à-dire qu'en ajoutant une directive V-on au point de montage, les méthodes du composant parent sont déclenchées en même temps lorsque les événements du composant enfant sont déclenchés;
[3] Slot: distribution, permettant au contenu du composant parent d'être inséré dans la structure de vue du composant enfant.
Comme code:
<div id = "app"> <p> Ceci est le premier composant parent </p> <widget: the-value = "test" @ some = "todo"> <span> 【Le contenu du premier composant parent inséré】 </span> </ widget> </div> <div id = "app2"> <p> Ceci est le deuxième composant parent </p> <widget @ some = "toDo"> </ widget> <cript> vue.component ("widget", {modèle: "<bouton @ click = 'dosomething'> <slot> </slot> Ceci est un composant réutilisé, cliquez sur it {{theValue}} </ Button>", Methods: {Dosometh console.log ("widget click");}}, accessoires: ['theValue']}) var vm = new vue ({el: '#App', data: {test: "test"}, méthodes: {todo: function () {console.log ("Il s'agit du premier composant parent")}}})); var vm_other = new vue ({el: '# app2', data: {name: "premier"}, méthodes: {too: function () {console.log ("Ceci est un autre composant parent")}}}); </cript>illustrer:
[1] La fente de distribution est utilisée dans le premier composant parent, et les accessoires sont utilisés pour transmettre la valeur (passer la valeur du test à la valeur du composant enfant);
[2] Parmi les deux composants, après avoir cliqué sur le composant enfant, la méthode Dosomething dans les méthodes, puis l'événement dans les événements est exécuté. Ensuite, via le point de montage @ some = "todo" pour lier l'événement du composant enfant et la méthode TODO du composant parent ensemble.
Par conséquent, après avoir cliqué sur le composant enfant, la méthode TODO du composant parent sera finalement exécutée.
[3] La modification de la valeur transmise en composant enfant dans le composant parent modifiera de manière synchrone la valeur du composant enfant (c'est-à-dire que les deux seront liés aux données);
③Sync Composants:
Selon ma compréhension, tout simplement, une grande application a plusieurs composants, mais certains composants n'ont pas besoin d'être chargés immédiatement, ils sont donc divisés en plusieurs composants (par exemple, ceux qui doivent être chargés immédiatement, mais pas immédiatement);
S'il doit être chargé immédiatement, il est évidemment préférable de le mettre dans le même fichier (ou demandé ensemble dans le même lot);
S'il n'a pas besoin d'être chargé immédiatement, il peut être placé dans d'autres fichiers, mais en cas de besoin, Ajax le demandera au serveur;
Les demandes suivantes sont des composants asynchrones;
La fonction de Vue.js est la fonction de Vue.js, qui permet à la composante d'être définie comme une fonction d'usine et analyse dynamiquement la définition du composant.
Peut être utilisé avec WebPack.
Quant à la façon de l'utiliser en détail, je ne le comprends pas très bien. Je ne peux pas l'écrire clairement dans le tutoriel, donc je vais le mettre de côté et attendre qu'il l'étudie en cas de besoin.
Lien:
http://cn.vuejs.org/guide/components.html#u5f02_u6b65_u7ec4_u4ef6
④Resource des conventions de dénomination:
En termes simples, les balises HTML (telles que Div et Div sont les mêmes) et les fonctionnalités (telles que les instructions d'écriture comme V-on au lieu de Von) sont insensibles à la casse.
Les noms de ressources sont souvent écrits sous forme de chameau (comme le chameau comme un chameau), ou sous la forme de majuscules de la première lettre du mot (comme Pascalcase, je ne sais pas comment appeler cela, mais j'écris rarement ceci).
Vue.component ("mytemplate", {// ...... omis})Vue.js peut le reconnaître automatiquement et le convertir.
<my-template> </ my-template>
Le modèle ci-dessus peut remplacer automatiquement cette balise.
⑤ composants réécursifs:
Autrement dit, un composant récursif est un composant qui intègre son propre modèle en soi.
Si un composant souhaite se réintégrer, il a besoin de l'attribut de nom et Vue.Component est livré avec son propre attribut de nom.
Cela ressemble probablement à ça,
<div id = "app"> <my-template> </ my-template> </div> <cript> vue.component ("mytemplate", {modèle: "<p> <my-template> </ my-template> </p>"})C'est une récursivité infinie, ce qui n'est certainement pas possible. Par conséquent, il est nécessaire de contrôler le nombre de couches de sa récursivité, par exemple, de contrôler la récursivité à travers les données et d'arrêter la récursivité lorsque les données sont vides.
L'exemple de code est le suivant:
<ul id = "app"> <li> {{b}} </li> <my-template v-if = "a": a = "aa": b = "ab"> </ my-timplate> </ul> <cript> vue.component ("mytemplate", {template: '<ul> <li> {b}} </li> <y-template : a = "aa": b = "ab"> </ my-timplate> </ul> ', accessoires: ["a", "b"]}) var data = {a: {a: {a: {a: 0, b: 3}, b: 2}, b: 1} var vm = new Vue ({el:' #App ', data: data, data, méthodes: {toDo: fonde () + = "!"; Console.log (this.test); </cript>illustrer:
[1] Lors de la transmission, la valeur de A et la valeur de B sont passées à travers les accessoires, où la valeur de A est utilisée comme source de données pour les valeurs de A et B du composant après récursivité;
Déterminez ensuite si la valeur d'un adoption à la composante récursive existe et, dans l'affirmative, continuez de se réintégrer;
Si la valeur de A n'existe pas, la récursivité est arrêtée.
Exemple de fragment:
Autrement dit, l'instance dite de fragment signifie que le modèle du composant n'est pas sous un nœud racine:
Fragment Code d'instance:
Vue.component ("mytemplate", {template: '<div> 1 </div>' + '<div> 2 </div>',})Instance non fragment:
Vue.component ("mytemplate", {template: '<div>' + '<div> 1 </div>' + '<div> 2 </div>' + '</div>',})Les caractéristiques suivantes des instances de fragment sont ignorées:
[1] Instructions de contrôle non processus sur les éléments des composants (tels que les instructions de V-émission écrites au point de montage et contrôlées par le composant parent, mais notez que V-if appartient aux instructions de contrôle de processus);
【2】 Fonction non-PROPS (notez que les accessoires ne seront pas ignorés, les accessoires en plus sont écrits sur le point de montage);
[3] transition (c'est-à-dire que l'attribut de transition sera ignoré);
Pour plus de référence à la documentation officielle:
http://cn.vuejs.org/guide/components.html#u7247_u65ad_u5b9e_u4f8b
Modèle en ligne
Référence: http://cn.vuejs.org/guide/components.html#u5185_u8054_u6a21_u677f
Ce qui précède est le composant du chapitre 13 de Vuejs que l'éditeur vous a présenté - des éléments divers. 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!