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.
Composants d'utilisation
registre
Comme mentionné précédemment, nous pouvons créer un constructeur de composants à l'aide de vue.extend ():
var myComponent = vue.Extend ({// Options ...})Pour utiliser ce constructeur comme composant, vous devez vous inscrire avec `Vue.Component (tag, constructeur)` **:
// Enregistrez à l'échelle mondiale le composant, la balise est my-composantVue.Component ('my-composant', myComponent)<p> vue.js n'impose pas la règle W3C (minuscules, et comprend une barre courte) pour les noms de balises personnalisés, bien qu'il soit préférable de suivre cette règle.
Une fois le composant enregistré, il peut être utilisé comme élément personnalisé <my-composant> dans le module de l'instance parent. Pour s'assurer que le composant est enregistré avant d'initialiser l'instance racine:
<div id = "example"> <my-composant> </ my-composant> </div> // define var myComponent = vue.Extend ({template: '<div> un composant personnalisé! </div>'}) // registre vue.component ('my-composant', myComponent) // Create Root instance new vue ({el: '#example'})Rendu comme:
<div id = "example"> <div> un composant personnalisé! </div> </div>
Notez que le modèle du composant remplace l'élément personnalisé et que la fonction de l'élément personnalisé est uniquement en point de montage. Vous pouvez utiliser l'option d'instance Remplacer pour décider de la remplacer.
Inscription locale
Il n'est pas nécessaire d'enregistrer chaque composant mondial. Il ne peut être utilisé que dans d'autres composants, inscrivez-vous avec les composants de l'option d'instance:
var child = vue.extend ({/ * ... * /}) var parent = vue.extend ({template: '...', composants: {// <my-composant> ne peut être utilisé que dans le modèle de composant parent 'my-composant': enfant}})Cette encapsulation convient également à d'autres ressources telles que les instructions, les filtres et les transitions.
Enregistrer le sucre syntaxtique
Pour simplifier l'événement, vous pouvez transmettre directement l'objet option au lieu du constructeur des options Vue.Component () et des composants. Vue.js appelle automatiquement Vue.Extend () derrière le dos:
// Extension et enregistrement vue.component ('my-composant', {template: '<div> un composant personnalisé! </div>'}) // Ceci est également possible avec le registre local var parent = vue.extend ({composant: {'my-composant': {template: '<v> un composant personnalisé! </v>'}}})Problèmes d'options de composant
La plupart des options transmises dans le constructeur Vue peuvent également être utilisées dans vue.extend (), mais il existe deux cas spéciaux: les données et El. Imaginez si nous passons simplement une option d'objet en tant que données à vue.extend ():
var data = {a: 1} var myComponent = vue.extend ({data: data})Le problème avec cela est que toutes les instances de MyComponent partageront le même objet «Data»! Ce n'est pas ce que nous voulons, nous devons donc utiliser une fonction comme l'option «Data» pour renvoyer un nouvel objet:
var myComponent = vue.Extend ({data: function () {return {a: 1}}})De même, l'option «El» doit également être une fonction lorsqu'elle est utilisée dans `vue.extend ()».
Analyse du modèle
Le modèle de Vue est un modèle DOM, qui utilise un analyseur natif du navigateur au lieu d'implémenter un seul. Par rapport aux modèles de chaînes, les modèles DOM ont des avantages, mais il y a des problèmes, et il doit s'agir d'un extrait HTML valide. Certains éléments HTML ont des limites sur les éléments qui peuvent être placés à l'intérieur. Limites courantes:
• A ne peut pas contenir d'autres éléments interactifs (tels que les boutons, les liens)
• UL et OL ne peuvent que directement inclure Li
• SELECT peut uniquement inclure l'option et l'optgroup
• Le tableau ne peut que directement inclure la tête, le TBODY, TFOOT, TR, Légende, Col, Colgroup
• TR ne peut inclure que TH et TD directement
En pratique, ces limitations peuvent conduire à des résultats inattendus. Bien que cela puisse fonctionner dans des cas simples, vous ne pouvez pas compter sur des composants personnalisés pour étendre les résultats avant la validation du navigateur. Par exemple, <my-Select> <Option> ... </ Option> </y-Select> n'est pas un modèle valide, même si le composant My-Select finit par se développer à <lelect> ... </lect>.
Un autre résultat est que les balises personnalisées (y compris les éléments personnalisées et les balises spéciales, telles que <Comaliers>, <appée>, <partal>) ne peuvent pas être utilisées dans des balises qui ont des restrictions sur des éléments internes, tels que UL, SELECT, Table, etc. Les balises personnalisées placées à l'intérieur de ces éléments seront mentionnées en dehors de l'élément, ce qui rend incorrectement.
Pour les éléments personnalisés, l'attribut IS doit être utilisé:
<ballage> <tr is = "my-composant"> </tr> </ table>
`` ne peut pas être utilisé dans `` '' `` À l'heure actuelle, ``
Il peut y avoir plusieurs ``:
<Bile> <tbody v-for = "Item in items"> <tr> Même Row </tr> <Tr> Row Odd </tr> </tbody> </ Table>
Accessoires
Passer des données à l'aide d'accessoires
La portée des instances de composants est orpheline. Cela signifie que les données du composant parent ne peuvent pas et ne doivent pas être référencées directement dans le modèle du composant enfant. Vous pouvez utiliser des accessoires pour transmettre des données aux composants enfants.
"Prop" est un champ de données de composant qui devrait être transmis à partir du composant parent. Les composants de l'enfant doivent déclarer explicitement les accessoires avec l'option d'accessoires:
Vue.component ('enfant', {// Declare les accessoires: ['msg'], // prop peut être utilisé dans des modèles // vous pouvez utiliser `this.msg` pour définir le modèle: '<span> {{msg}} </span>'})Puis passez-le une chaîne normale:
<enfant msg = "Hello!"> </fil>
Bosse vs barre horizontale
Les attributs HTML sont insensibles aux cas. Lorsqu'un accessoire avec le nom de nom de camelcase est utilisé comme fonctionnalité, il doit être converti en cas de kebab (lignes horizontales courtes séparées):
Vue.Component ('Child', {// CamelCase dans JavaScript Props: ['MyMessage'], modèle: '<span> {{MyMessage}} </span>'}) <! - Kebab-Case dans HTML -> <Child My-Message = "Hello!"> </ Enfant>Accessoires dynamiques
Semblable à l'utilisation de V-Bind pour lier les attributs HTML à une expression, vous pouvez également utiliser V-Bind pour lier les accessoires dynamiques aux données du composant parent. Chaque fois que les données du composant parent changent, elles sont également transmises au composant enfant:
<div> <entrée v-model = "parentmsg"> <br> <child v-bider: my-message = "parentmsg"> </fil> </div>
L'utilisation de la syntaxe d'abréviation de «V-Bind» est généralement plus simple:
<child: my-message = "parentmsg"> </fil>
Syntaxe littérale vs syntaxe dynamique
Une erreur courante pour les débutants est de passer des valeurs numériques en utilisant la syntaxe littérale:
<! - a passé une chaîne "1" ->
<comp some-prop = "1"> </chand
Parce qu'il s'agit d'un accessoire littéral, sa valeur est passé dans la chaîne `" 1 "` au lieu du nombre réel. Si vous souhaitez passer un numéro JavaScript réel, vous devez utiliser une syntaxe dynamique afin que sa valeur soit calculée comme une expression JavaScript:
<! - Passez le numéro réel ->
<comp: some-prop = "1"> </ comp>
Type de liaison des accessoires
L'ensemble est une liaison unidirectionnelle par défaut: lorsque les propriétés du composant parent changent, elle sera transmise au composant enfant, mais l'inverse ne le fera pas. Il s'agit d'empêcher le composant enfant de modifier accidentellement l'état du composant parent - cela rendra le flux de données de l'application difficile à comprendre. Cependant, il est également possible de forcer explicitement la liaison bidirectionnelle ou unique à l'aide du modificateur de liaison .Sync ou .once:
Syntaxe comparative:
<! - La par défaut est une liaison à sens unique -> <child: msg = "parentmsg"> </fil> <! - Bidirectional Binding -> <child: msg.sync = "parentmsg"> </fffred> <! - Binding unique -> <fffred: msg.once = "parentm
La liaison bidirectionnelle synchronise l'attribut msg du composant enfant à l'attribut parentmsg du composant parent. La liaison unique ne synchronisera pas les changements après la création.
Notez que si Prop est un objet ou un tableau, il est passé par référence. Le modifier dans un composant enfant affectera l'état du composant parent, quel que soit le type de liaison utilisé.
Vérification des accessoires
Les composants peuvent spécifier les exigences de vérification des accessoires. Ceci est utile lorsque des composants sont donnés à d'autres, car ces exigences de vérification forment l'API du composant, garantissant que les autres utilisent correctement le composant. À l'heure actuelle, la valeur des accessoires est un objet qui contient des exigences de vérification:
Vue.component('example', { props: { // Basic type detection (`null` means any type is OK) propA: Number, // Multiple types (1.0.21+) propM: [String, Number], // Required and string propB: { type: String, required: true }, // Number, with default values propC: { type: Number, default: 100 }, // The default value of an object/array should be returned Par une fonction à propd: {type: objet, par défaut: function () {return {msg: 'hello'}}}, // spécifiez cet access Dans 1.0.12) // converti la valeur avant de définir la valeur propg: {coerce: function (val) {return val + '' // converti la valeur en une chaîne}}, proph: {coerce: function (val) {return json.psse (val) // converti la chaîne JSON en un objet}}}))Le type peut être le constructeur natif suivant:
•Chaîne
•Nombre
• booléen
•Fonction
•Objet
•Tableau
Le type peut également être un constructeur personnalisé qui utilise l'instance de détection.
Lorsque la vérification des accessoires échoue, Vue refuse de définir cette valeur sur le composant enfant et un avertissement sera lancé si la version de développement est utilisée.
Communication des composants parent-enfant
Lien parent
Un composant enfant peut accéder à son composant parent avec ce parent. $ Parent. Les descendants de l'instance racine peuvent y accéder avec cette racine. $. Le composant parent a un tableau ceci. $ Enfants qui contient tous ses éléments enfants.
Bien que toute instance sur la chaîne parent soit accessible, les composants de l'enfant doivent éviter de s'appuyer directement sur les données du composant parent et d'essayer d'utiliser des accessoires pour transmettre des données explicitement. De plus, il est très mauvais de modifier l'état du composant parent dans un composant enfant car:
1. Cela permet au composant parent d'être étroitement couplé avec le composant enfant;
2. Si vous ne regardez que le composant parent, il est difficile de comprendre l'état du composant parent. Car il peut être modifié par n'importe quel composant enfant! Idéalement, seul le composant peut modifier son état lui-même.
Événements personnalisés
L'instance Vue implémente une interface d'événement personnalisée pour la communication dans l'arborescence des composants. Ce système d'événements est indépendant des événements DOM natifs et l'utilise différemment.
Chaque instance Vue est un déclencheur d'événements:
• Utilisez $ on () pour écouter les événements;
• Utilisez $ emit () pour déclencher un événement dessus;
• Utiliser $ Dispatch () pour distribuer des événements et les événements bouillonnent le long de la chaîne parentale;
• Utilisez $ Broadcast () pour diffuser des événements, et les événements sont transmis vers le bas à tous les descendants.
Contrairement à l'événement DOM, l'événement VUE arrête automatiquement la bulle une fois le premier rappel déclenché pendant le processus de bulle, sauf si le rappel renvoie explicitement True.
Exemple simple:
<! - Template des composants de l'enfant -> <template id = "child-template"> <entrée v-model = "msg"> <bouton V-on: cliquez sur = "notifier"> Événement de dispositif </pample> </ template> <! - Template du composant parent -> <div id = "Event-Exemple"> <p> Messages: {{messages | JSON}} </p> <fil> </ child> </div> // Enregistrer le composant enfant // Envoyez le message actuel sur Vue.Component ('Child', {modèle: '# child-template', data: function () {return {msg: 'hello'}}}, méthodes: {notify: function () {if (this.msg.trim ()) {this. $ Dispatch. this.msg) this.msg = ''}}}}) // initialiser le composant parent // poussez l'événement dans un tableau lorsque le message est reçu var parent = new Vue ({el: '# events-example', data: {messages: []}, // Lors de la création d'une instance, l'option `` Events` appelle simplement `$ on` Dans l'événement, le rappel est automatiquement lié à l'instance où il est enregistré ceci.sessages.push (msg)}}})Utilisez V-on pour lier les événements personnalisés
L'exemple ci-dessus est très bon, mais nous ne pouvons pas voir intuitivement où l'événement "Child-MSG" provient du code du composant parent. Il serait préférable que nous déclarions le gestionnaire d'événements où les sous-composants sont utilisés dans les modèles. Pour ces sous-composants, vous pouvez utiliser V-on pour écouter pour les événements personnalisés:
<child v-on: child-msg = "handleit"> </fil>
Cela indique clairement: lorsque le composant enfant déclenche l'événement "Child-MSG", la méthode `Handleit" du composant parent sera appelée. Tout le code qui affecte l'état du composant parent est placé dans la méthode «Handleit» du composant parent; Le composant enfant se concentre uniquement sur l'événement de déclenchement.
Index du sous-composant
Malgré les accessoires et les événements, il est parfois encore nécessaire d'accéder aux composants enfants directement en JavaScript. À cette fin, vous pouvez utiliser V-Ref pour spécifier un ID d'index pour le composant enfant. Par exemple:
<div id = "parent"> <user-profile V-ref: profil> </sery-proFil> </div> var parent = new Vue ({el: '#parent'}) // Access Child Component var Child = Parent. $ Refs.profileLorsque V-Ref et V-FOR sont utilisés ensemble, REF est un tableau ou un objet qui contient des composants enfants correspondants.
Utilisez des emplacements pour distribuer du contenu
Lorsque vous utilisez des composants, vous devez souvent les combiner comme ceci:
<app> <app-header> </ app-header> <po-footer> </pp-footer> </pp>
Remarque deux points:
1. Le composant <pp> ne sait pas quel contenu sera dans son point de montage. Le contenu du point de montage est déterminé par le composant parent de <App>.
2. Le composant <pp> est susceptible d'avoir son propre modèle.
Pour que les composants soient combinés, nous avons besoin d'un moyen de mélanger le contenu du composant parent avec le modèle propre du composant enfant. Ce traitement est appelé distribution de contenu (ou «traduction» si vous connaissez Angular). Vue.js implémente une API de distribution de contenu qui fait référence au projet de spécification de composant Web actuel et utilise un élément <slot> spécial comme emplacement pour le contenu d'origine.
Compilation
Avant de plonger dans l'API de distribution de contenu, nous clarifions d'abord la portée de la compilation de contenu. Supposons que le modèle est:
<Chyd-composant>
{{msg}}
</ child-composant>
MSG devrait-il être lié aux données du composant parent ou aux données liées au composant enfant? La réponse est le composant parent. La portée des composants est simplement:
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
Une erreur courante consiste à lier une directive aux propriétés / méthode d'un composant enfant dans le modèle de composant parent:
<! - invalide ->
<child-composant v-show = "SomeChildProperty"> </ child-composant>
En supposant que SomeChildProperty est une propriété d'un composant enfant, l'exemple ci-dessus ne fonctionnera pas comme prévu. Le modèle de composant parent ne doit pas connaître l'état du composant enfant.
Si vous souhaitez lier les instructions dans un sous-composant au nœud racine d'un composant, vous devriez le faire dans son modèle:
Vue.component ('child-composant', {// fonctionne car il se trouve dans le modèle de portée correct: '<div v-show = "SomeChildProperty"> Child </div>', Data: function () {return {SomeChildProperty: true}}})De même, le contenu de distribution est compilé dans le cadre du composant parent.
Créneau unique
Le contenu du composant parent sera jeté à moins que le modèle de composant enfant ne contient <slot>. Si le modèle de composant enfant n'a qu'un seul emplacement sans caractéristiques, le contenu entier du composant parent sera inséré lorsque se trouve la fente et le remplacera.
Le contenu de la balise <slot> est considéré comme du contenu en arrière. Le contenu de secours est compilé dans le cadre du composant enfant, et le contenu de secours est affiché lorsque l'élément hôte est vide et qu'il n'y a pas de contenu pour l'insertion.
Supposons que le composant my-composant dispose du modèle suivant:
<div> <h1> Ceci est mon composant! </h1> <slot> S'il n'y a pas de contenu distribué, cela me montrera. </slot> </div>
Modèle de composant parent:
<my-composant>
<p> Il s'agit d'un contenu original </p>
<p> Il s'agit d'un contenu plus original </p>
</ my-composant>
Résultat de rendu:
<div> <h1> Ceci est mon composant! </h1> <p> Il s'agit d'un contenu original </p> <p> Il s'agit d'un contenu plus original </p> </div>
Créneau nommé
L'élément <slot> peut être configuré avec un nom de fonctionnalité spécial pour configurer comment distribuer du contenu. Plusieurs créneaux peuvent avoir des noms différents. Une machine à sous nommée correspondra aux éléments du fragment de contenu qui ont l'attribut de slot correspondant.
Il peut encore y avoir une machine à sous anonyme, qui est la fente par défaut, en tant que emplacement de secours pour faire correspondre les fragments de contenu qui ne peuvent être trouvés. Sans emplacement par défaut, ces fragments de contenu inégalés seront jetés.
Par exemple, supposons que nous ayons un composant multi-insertion avec un modèle comme:
<div> <slot name = "One"> </slot> <slot> </slot> <slot name = "Two"> </slot> </div>
Modèle de composant parent:
<multi-insertion> <p slot = "one"> un </p> <p slot = "deux"> deux </p> <p> par défaut a </p> </ multi-insertion>
Le résultat de rendu est:
<div> <p slot = "one"> un </p> <p> par défaut a </p> <p slot = "deux"> deux </p> </div>
L'API de distribution de contenu est un mécanisme très utile lors de la combinaison des composants.
Composants dynamiques
Plusieurs composants peuvent utiliser le même point de montage, puis basculer dynamiquement entre eux. Utilisez l'élément <Component> réservé pour se lier dynamiquement à sa propriété IS:
new vue ({el: 'body', data: {currentView: 'home'}, composants: {home: {/ * ... * /}, poteaux: {/ * ... * /}, archive: {/ * ... * /}}}) <Component: is = "CurrentView"> <!Gardien
Si le composant commuté est conservé en mémoire, il peut être conservé ou rendu. Pour ce faire, vous pouvez ajouter un paramètre de directif de conservation:
<Component: Is = "CurrentView" Keep-Alive>
<! - Les composants inactifs seront mis en cache ->
</moral
Activer le crochet
Lors de la commutation des composants, la coupe en composants peut nécessiter certaines opérations asynchrones avant de les couper. Pour contrôler la durée de la commutation du composant, ajoutez un crochet Activer au composant de coupe:
Vue.component ('active-example', {activate: function (Done) {var self = this loadDataaSync (function (data) {self.someData = data Done ()})}})Notez que le crochet Activate n'agit que lors de la commutation dynamique des composants ou du rendu d'initialisation des composants statiques et n'agit pas dans l'insertion manuelle à l'aide de méthodes d'instance.
mode transition
La fonction de mode transition est utilisée pour spécifier comment la transition des composants dynamiques.
Par défaut, entrez et laissez la transition en douceur. Cette fonctionnalité peut spécifier deux autres modes:
• In-out: le nouveau composant passe d'abord vers et une fois sa transition terminée, le composant actuel passera.
• Out-in: Le composant actuel passe d'abord, et une fois sa transition terminée, le nouveau composant passe au processus.
Exemple:
<! - Fade Out First puis fondre dans -> <composant: Is = "View" transition = "fade" transition-mode = "out-in"> </command> .fade-transition {transition: opacity .3s faciliter;}. Fade-enter, .fade-leave {opacity: 0;}Divers
Composants et V-For
Les composants personnalisés peuvent utiliser V-FOR directement comme les éléments normaux:
<my-composant v-for = "item in items"> </ my-composant>
Cependant, les données ne peuvent pas être transmises à un composant car la portée du composant est orpheline. Pour transmettre des données aux composants, les accessoires doivent être utilisés:
<ma composant
V-for = "Article dans les éléments"
: item = "item"
: index = "$ index">
</ my-composant>
La raison pour laquelle l'élément n'est pas automatiquement injecté dans le composant est que cela entraîne étroitement le composant au v-FOR actuel. Déclarer explicitement d'où proviennent les données et peuvent être réutilisées ailleurs pour les composants.
Écrire des composants réutilisables
Lors de l'écriture de composants, il est avantageux de se rappeler s'il faut réutiliser les composants. Il n'y a rien à voir avec le couplage serré des composants jetables à d'autres composants, mais les composants réutilisables devraient définir une interface publique claire.
L'API du composant Vue.js provient de trois parties: accessoire, événements et fente:
• Prop permet un environnement externe de transmettre des données aux composants;
• Les événements permettent aux composants de déclencher des actions dans l'environnement externe;
• l'emplacement permet à l'environnement externe d'insérer du contenu dans la structure de vue du composant.
À l'aide de la syntaxe d'abréviation de la ligne V et du V-on, l'indentation du modèle est claire et concise:
<ma composant
: foo = "baz"
: bar = "qux"
@ event-a = "dothis"
@ event-b = "dothat">
<! - Contenu ->
<img slot = "icon" src = "...">
<p slot = "Main-text"> Bonjour! </p>
</ my-composant>
Composants asynchrones
Dans les grandes applications, nous devrons peut-être diviser l'application en petits morceaux et le télécharger à partir du serveur uniquement si nécessaire. Pour faciliter les choses, Vue.js permet de définir le composant comme une fonction d'usine, analysant dynamiquement la définition du composant. Vue.js ne déclenche la fonction d'usine que lorsque le composant doit être rendu et cache le résultat pour une rediffusion ultérieure. Par exemple:
Vue.component ('async-example', function (résoudre, rejeter) {setTimeout (function () {Resolve ({template: '<div> je suis async! </div>'})}, 1000)})La fonction d'usine reçoit un rappel de résolution, appelé lorsqu'une définition de composants téléchargée à partir du serveur est reçue. Vous pouvez également appeler Rejeter (raison) pour indiquer que le chargement a échoué. Ici setTimeout est juste pour la démonstration. C'est entièrement à vous d'obtenir les composants. Fonction de segmentation de code recommandée avec WebPack:
Vue.component ('async-webpack-example', fonction (résolution) {// Cette syntaxe spéciale requise indique webpack // diviser automatiquement le code compilé en différents blocs, // ces blocs seront automatiquement téléchargés via une demande ajax.Convention de dénomination des ressources
Certaines ressources, telles que les composants et les directives, apparaissent dans des modèles sous le nom d'attributs HTML ou d'éléments personnalisés HTML. Étant donné que les noms des attributs HTML et des noms de balises ne sont pas sensibles à la casse, le nom de la ressource doit généralement utiliser la forme de kebab-case au lieu de CamelCase, ce qui n'est pas très pratique.
Vue.js prend en charge le nom des ressources sous la forme de Camelcase ou Pascalcase et les convertit automatiquement en cas de kebab dans le modèle (similaire à la convention de dénomination de PROP):
// Dans les composants de la définition des composants: {// Enregistrez MyComponent au formulaire CamelCase: {/ * ... * /}} <! - Utilisation du formulaire de kebab-case dans les modèles -> <my-composant> </ my-Component> ES6 Object Litteral Abréviation est également amende: // Pascalcase TextBox de './components/Text-box'; './components/dropdown-meu' ;export default {Components: {// write <Text-box> et <boutdown-menu> TextBox, DropdownMenu}}Composants récursifs
Les composants peuvent s'appeler récursivement dans leurs modèles, mais seulement s'il a l'option de nom:
var stackoverflow = vue.extend ({name: 'stack-overflow', modèle: '<div>' + // l'appelez récursivement sur son propre '<stack-overflow> </ stack-overflow>' + '</v>'})Le composant ci-dessus provoquera une erreur "la taille de la pile maximale dépassée", alors assurez-vous que l'appel récursif a une condition de terminaison. Lorsqu'un composant est enregistré globalement à l'aide de Vue.Component (), l'ID de composant est automatiquement défini sur l'option Nom du composant.
Instance de fragment
Lorsque vous utilisez l'option de modèle, le contenu du modèle remplace l'élément de montage de l'instance. Par conséquent, les éléments de niveau supérieur du modèle recommandé sont toujours des éléments uniques.
N'écrivez pas le modèle comme ceci:
<div> Node racine 1 </div>
<div> Node racine 2 </div>
Il est recommandé d'écrire ceci:
<div>
J'ai un seul nœud racine!
<div> Node 1 </div>
<div> Node 2 </div>
</div>
Les situations suivantes transformeront l'instance en une instance fragmentée:
1. Le modèle contient plusieurs éléments de niveau supérieur.
2. Le modèle ne contient que du texte normal.
3. Le modèle ne contient que d'autres composants (d'autres composants peuvent être une instance de fragment).
4. Le modèle ne contient qu'une seule directive d'élément, telle que <partial> ou <router-visual> de Vue-Router.
5. Le nœud racine du modèle a une instruction de contrôle de processus, tel que V-IF ou V-FOR.
Ces cas permettent à l'instance d'avoir un nombre inconnu d'éléments de niveau supérieur, qui traiteront son contenu DOM comme un fragment. L'instance de fragment rend toujours correctement le contenu. Cependant, il n'a pas de nœud racine, son $ el pointe vers un nœud d'ancrage, c'est-à-dire un nœud de texte vide (un nœud de commentaire en mode de développement).
Mais plus important encore, les instructions de contrôle non processus, les caractéristiques non déploiées et les transitions sur les éléments des composants seront ignorées car il n'y a pas d'élément racine pour la liaison:
<! - Non, car il n'y a pas d'élément racine ->
<Example V-show = "OK" transition = "Fade"> </nampe>
<! - accessoires oui->
<Exemple: prop = "SomeData"> </ / Exemple>
<! - Le contrôle des processus est correct, mais il n'y a pas de transition ->>
<Exemple v-if = "ok"> </ample>
Bien sûr, les instances de fragments ont leurs utilisations, mais il est généralement préférable de donner au composant un nœud racine. Il garantit que les instructions et les performances spéciales sur les éléments des composants sont correctement converties et que les performances sont également légèrement meilleures.
Modèles en ligne
Si un composant enfant possède la propriété en ligne en ligne, le composant traitera son contenu comme son modèle au lieu de le traiter comme son contenu de distribution. Cela rend le modèle plus flexible.
<my-composant en ligne-template>
<p> Ceux-ci sont compilés comme le modèle propre du composant </p>
<p> pas le contenu de traduction du parent. </p>
</ my-composant>
Cependant, le template en ligne rend la portée du modèle difficile à comprendre et ne peut pas mettre en cache les résultats de compilation de modèle. Une meilleure pratique consiste à utiliser l'option de modèle pour définir des modèles dans un composant.
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.