Cette fois, je vais vous expliquer quelles sont les méthodes de base d'utilisation des composants vue et quelles sont les précautions lors de l'utilisation des composants vue. Ce qui suit est un cas pratique, jetons un coup d'œil.
Qu'est-ce qu'un composant ?
Un composant est une simple encapsulation de données et de méthodes. Le composant du Web peut en fait être considéré comme un composant de la page. Il s'agit d'une interface avec une logique et des fonctions indépendantes, en même temps, il peut être intégré les uns aux autres selon les règles d'interface spécifiées, et devient finalement un ensemble complet. application. La page est composée d'un Il est composé de composants comme celui-ci, tels que la navigation, la liste, la fenêtre contextuelle, le menu déroulant, etc. La page n'est qu'un conteneur pour ces composants. Les composants sont librement combinés pour former une interface entièrement fonctionnelle lorsqu'un composant n'est pas nécessaire ou que vous souhaitez remplacer un composant, vous pouvez le remplacer et le supprimer à tout moment sans affecter le fonctionnement de. l'intégralité de la demande. , L'idée principale de la composantisation frontale est de diviser une chose énorme et complexe en petites choses avec une granularité raisonnable.
Utiliser pour améliorer l'efficacité du développement, faciliter la réutilisation, simplifier les étapes de débogage, améliorer la maintenabilité de l'ensemble du projet et faciliter le développement collaboratif.
En tant que framework frontal léger, le cœur de vue est le développement de composants. Les composants
peuvent étendre des éléments HTML et encapsuler du code réutilisable. À un niveau élevé, un composant est un élément personnalisé auquel le compilateur de Vue.js ajoute des fonctionnalités spéciales. Dans certains cas, les composants peuvent également apparaître comme des éléments HTML natifs étendus avec l'attribut is.
Dans Vue, les composants sont des instances Vue réutilisables. Étant donné que les composants sont des instances Vue réutilisables, ils reçoivent les mêmes options que le nouveau Vue, telles que les hooks de données, calculés, de surveillance, de méthodes et de cycle de vie. Les seules exceptions sont les options spécifiques à l'instance racine comme el.
Ces composants sont enregistrés mondialement. C'est-à-dire qu'ils peuvent être utilisés dans le modèle de toute instance racine de Vue nouvellement créée (nouvelle Vue) après enregistrement. Par exemple :
Il en va de même pour tous les sous-composants, ce qui signifie que ces trois composants peuvent également s'utiliser en interne.
Inscription locale
L'inscription mondiale n'est souvent pas idéale. Par exemple, si vous utilisez un système de build tel que webpack, l'enregistrement global de tous les composants signifie que même si vous n'utilisez plus un composant, il sera toujours inclus dans votre résultat de build final. Cela entraîne une augmentation inutile de la quantité de JavaScript téléchargée par les utilisateurs.
Dans ces cas-là, vous pouvez définir le composant via un simple objet JavaScript :
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
Copier après la connexion
Définissez ensuite le composant que vous souhaitez utiliser dans les options des composants :
Pour chaque attribut de l'objet composants, son nom d'attribut est le nom de l'élément personnalisé et sa valeur d'attribut est l'objet option de ce composant. Notez que les composants enregistrés localement ne sont pas disponibles dans leurs composants enfants. Par exemple, si vous souhaitez que ComponentA soit disponible dans ComponentB, vous devez écrire comme ceci :
var ComponentA = { /* ... */ }
var ComponentB = {
components: {
'component-a': ComponentA
},
// ...
}
Copier après la connexion
Utiliser les composants enregistrés dans Babel et webpack
Remarque Dans ES2015+, mettre un nom de variable similaire à ComponentA dans l'objet est en fait ComponentA : l'abréviation de ComponentA, c'est-à-dire que le nom de la variable est également :
Le nom de l'élément personnalisé utilisé dans le modèle contient le nom de la variable de cette option de composant
Enregistrement global automatisé des composants de base
Je ne comprends pas.
les données doivent être une fonction
data: {
count: 0
}
Copier après la connexion
Les variables dans les données définies de cette manière sont des variables globales lors de l'utilisation de composants, la modification de la valeur de la variable dans un composant affectera tous les composants. la valeur de cette variable. Pour éviter les interférences variables, l'option de données d'un composant doit être une fonction, afin que chaque instance puisse conserver une copie distincte de l'objet renvoyé :
data: function () {
return {
count: 0
}
}
Copier après la connexion
Composants dynamiques
Il est très utile de basculer dynamiquement entre différents composants, comme dans une interface multi-onglets :
interface Web
