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.
Contenu de distribution de fente
① Présentation:
En termes simples, si le composant parent doit mettre certains DOM dans le composant enfant, ces DOM sont affichés, non affichés, où ils sont affichés, et comment ils sont affichés, ce qui est la responsabilité de la distribution des emplacements.
② Par défaut
Le contenu du composant parent qui est enfermé à l'intérieur du composant enfant ne sont pas affichés.
Par exemple le code:
<div id = "app"> <filans> <span> 12345 </span> <! - La ligne ci-dessus ne sera pas affichée -> </fgends> </div> <script> var vm = new Vue ({el: '#App', les composants: {enfants: {// Ceci n'a pas de valeur de retour, et le modèle ne continuera pas d'être distribue: "<bouton> }}); </cript>Le contenu d'affichage est un bouton de bouton, qui ne contient pas le contenu dans la balise Span;
③s à mine
Autrement dit, si vous n'utilisez cette balise que, vous pouvez placer le composant parent dans le contenu du composant enfant et placer qu'il souhaite qu'il affiche.
<div id = "app"> <filans> <span> 12345 </span> <! - La ligne ci-dessus ne sera pas affichée -> </fgends> </div> <script> var vm = new Vue ({el: '#App', les composants: {enfants: {// Cela n'a pas de valeur de retour, et le modèle ne continuera pas d'être distribue: "<Button> <Slot> Utilisez la balise Button </futton> "}}}); </cript>Par exemple, si vous écrivez ceci, le résultat est:
<button> <span> 12345 </span> Pour clarifier l'étendue de l'action, utilisez la balise de bouton </frus>
C'est-à-dire que le contenu du composant parent placé dans le composant enfant est inséré dans la position <slot> </slot> du composant enfant;
Notez que même s'il y a plusieurs balises, ils seront insérés ensemble, ce qui équivaut à remplacer la balise <slot> </slot> par la balise placée dans le composant enfant.
④ Slot nommé
Mettez différentes balises HTML placées dans des sous-composants à différents endroits
Le composant parent ajoute l'attribut slot = "nom" à la balise à distribution
Le composant enfant ajoute l'attribut name = ”name name” dans la balise de fente de l'emplacement de distribution correspondant, puis met la balise correspondante dans l'emplacement correspondant.
Exemple de code:
<div id = "app"> <filans> <span slot = "First"> 12345 </span> <span slot = "second"> 56789 </span> <! - La ligne ci-dessus ne sera pas affichée -> </filans> </div> <script> var vm = new Vue ({el: '#App', les composants: {enfants: {// cela n'a pas de valeur de retour, et le TEMPLATE ne va pas: les enfants: {// cela n'a pas "<frut-onter> <slot = 'first'> </slot> Afin de clarifier la portée de l'action, <slot name = 'second'> </slot> utilisez donc la balise de bouton </ bouton>"}}}); </cript>Le résultat est affiché comme suit: (Pour la commodité de la visualisation, la pause de ligne a été ajustée manuellement)
<button> <span slot = "First"> 12345 </span> Pour clarifier la portée de l'action, <span slot = "second"> 56789 </span> utilisez donc la balise de bouton </ftones>
⑤Scope du contenu de la distribution:
La portée du contenu distribué est déterminée en fonction du modèle où il est situé. Par exemple, la balise ci-dessus est contrôlée par le modèle du composant parent (bien qu'il soit inclus par la balise enfant du composant enfant, mais comme il n'est pas dans l'attribut de modèle du composant enfant, il n'appartient pas au composant enfant), il est contrôlé par le composant parent.
Exemple de code:
<div id = "app"> <filans> <span slot = "first" @ click = "tobeknow"> 12345 </span> <span slot = "second"> 56789 </span> <! - La ligne ci-dessus ne sera pas affichée -> </fgence> </div> <prise> var vm = new Vue ({el: '#App', méthodes: # Console.log ("Il s'agit de la méthode du parent");}}, composants: {enfants: {// Cela n'a pas de valeur de retour, et le modèle ne continuera pas d'être distribué: "<Fut-Button> <slot name = 'First'> </slot> afin d'utiliser la portée de l'action, <slot name = 'seconde> </slot> alors utilisez le tag de boutons </slot>"}); </cript>Lorsque la zone du texte 12345 est cliquée (plutôt que les boutons tous), la méthode Tobeknow du composant parent est déclenchée.
Mais lorsque vous cliquez sur d'autres domaines, il n'y a aucun effet.
Le tutoriel officiel dit ceci:
Le contenu du modèle de composant parent est compilé dans le cadre du composant parent; Le contenu du modèle de composant enfant est compilé dans le cadre du composant enfant
⑥ Conseils lorsqu'il n'y a pas de contenu distribué:
Si le composant parent ne place pas de balise dans le composant enfant, ou si le composant parent place une balise dans le composant enfant, mais a un attribut de slot, et que le composant enfant n'a pas de balise pour l'attribut de slot.
Ensuite, l'étiquette de l'emplacement du composant enfant ne jouera aucun rôle.
À moins qu'il n'y ait du contenu dans la balise de l'emplacement, le contenu de la balise de l'emplacement sera affiché lorsqu'il n'y aura pas de contenu distribué.
Comme dans l'exemple de code:
<div id = "app"> <filans> <span slot = "first"> 【12345】 </span> <! - La ligne ci-dessus ne sera pas affichée -> </DIGNED> </div> <cript> var vm = new Vue ({el: '#App ", les composants: {enfants:" name = 'First'> <Fut> 【S'il n'y a pas de contenu, il me montrera 1】 </ftont> </slot> afin de clarifier la portée de l'action, <slot name = 'Last'> <Flot> 【S'il n'y a pas de contenu, il me montrera 2】 </utton> </slot> alors utilisez le bouton Button Tag </v> "}}}); </cript>illustrer:
【1】 La balise de slot avec name = 'First' est remplacée par la balise correspondant au composant parent (le contenu à l'intérieur de la balise de fente est jeté);
【2】 La balise de l'emplacement de Name = 'Last', car il n'y a pas de contenu correspondant, le contenu à l'intérieur de la balise de fente sera affiché.
⑦ Si vous souhaitez contrôler les propriétés de la balise racine du sous-composant
[1] Tout d'abord, puisque la balise de modèle appartient au composant parent, il n'est pas possible de lier les instructions du composant enfant à la balise de modèle (car elle appartient au composant parent);
[2] Si vous devez contrôler si le composant enfant est affiché (comme V-IF ou V-show) via le composant parent, cette directive appartient évidemment au composant parent (comme placé sous les données du composant parent). Les balises peuvent être écrites sur le modèle du composant enfant.
Comme code:
<div id = "app"> <bouton @ click = "toshow"> cliquez pour permettre au composant de l'enfant afficher </button> <enfants v-if = "ABC"> </filoms> </div> <prict> var vm = new Vue ({el: '#App', data: {ABC: false}, méthodes: {toShow: function () {this.abc =! {// Ceci n'a pas de valeur de retour, modèle: "<div> Il s'agit d'un composant enfant </div>"}}}); </cript>illustrer:
Contrôlez si le composant enfant est affiché via le composant parent (cliquez sur le bouton pour changer la valeur de l'instruction V-IF).
[3] Si vous devez contrôler si le composant enfant est affiché (par exemple, laissez-le se cacher), cette instruction appartient évidemment au composant enfant (la valeur sera placée sous l'attribut de données du composant enfant), alors il ne peut pas être écrit comme ci-dessus, mais doit être placé dans l'étiquette racine du composant enfant.
<div id = "app"> <bouton @ click = "toshow"> Cliquez pour permettre au composant enfant afficher </sponse> <filans> <span slot = "First"> 【12345】 </span> <! - La ligne ci-dessus ne sera pas affichée -> </fgents> </div> <prict> var vm = new Vue ({el: '#App', Methods: {ToShow: function () {) this. $ enfants [0] .toHidden = true;}}, composants: {enfants: {// Cela n'a pas de valeur de retour, et le modèle ne continuera pas d'être distribué: "<div v-if = 'Tohidden' @ click = 'toHide'> Ceci est le composant enfant </v>", data: function {this.toHidden =! this.toHidden;}}}}}}}); </cript>illustrer:
Cliquer sur un composant enfant fera disparaître le composant enfant;
Cliquez sur le bouton du composant parent pour rediger le composant enfant en modifiant la propriété TOHIDDEN du composant enfant.
Les instructions du composant enfant sont liées au modèle du composant enfant (cela peut être appelé);
Ce qui précède est une explication détaillée de l'exemple de distribution de contenu de l'emplacement du 11e composant VueJS introduit par l'éditeur. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!