Cet article résume les points de connaissances pertinents et des exemples de code des bases des composants Vue. Les amis dans le besoin peuvent l'apprendre et s'y référer.
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 élément similaire, tel que la navigation, les listes, les fenêtres contextuelles, les menus déroulants, 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 données, les calculs, la surveillance, les méthodes et les hooks de cycle de vie. Les seules exceptions sont les options spécifiques à l'instance racine comme el.
Enregistrement des composants
Enregistrement global
Créer des composants via Vue.component :
Vue.component('my-component-name', {
// ... 选项 ...
})Ces composants sont enregistrés à l'échelle mondiale. 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 :
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
new Vue({ el: '#app' })
<p id="app">
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</p>Il en va de même pour tous les sous-composants, ce qui signifie que ces trois composants peuvent également s'utiliser les uns les autres 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 = { /* ... */ }puis le définir dans les options des composants Le composant que vous souhaitez utiliser :
new Vue({
el: '#app'
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})Pour chaque attribut de l'objet composants, son nom d'attribut est le nom de l'élément personnalisé. La valeur de l'attribut. est l'objet options 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
},
// ...
}Utiliser les composants enregistrés dans Babel et webpack
import ComponentA from './ComponentA.vue'
export default {
components: {
ComponentA
},
// ...
}Notez que dans ES2015+, mettre un nom de variable comme ComponentA dans un objet est en fait ComponentA : L'abréviation de ComponentA, c'est-à-dire , ce nom de variable Aussi :
Le nom de l'élément personnalisé utilisé dans le modèle
Le nom de la variable contenant les options de ce composant
Enregistrement global automatisé du composant de base
Je ne comprends pas.
les données doivent être une fonction
data: {
count: 0
}Les variables dans les données définies de cette manière sont des variables globales. Lors de l'utilisation de composants, elles le sont. dans un Modifier la valeur d'une variable dans un composant affectera la valeur de la variable dans tous les composants. 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
}
}Composants dynamiques
Il est très utile de basculer dynamiquement entre différents composants, comme dans une interface multi-onglets :
Le contenu ci-dessus peut être obtenu en ajoutant un attribut is spécial à l'élément
<!-- 组件会在 `currentTabComponent` 改变时改变 --> <component v-bind:is="currentTabComponent"></component>
Vous ferez attention Oui, si vous sélectionnez un article, passez à l'onglet Archive, puis revenez à Posts, l'article que vous avez sélectionné précédemment ne continuera pas à être affiché. En effet, Vue crée une nouvelle instance currentTabComponent chaque fois que vous passez à un nouvel onglet.
Recréer le comportement des composants dynamiques est souvent très utile, mais dans ce cas, nous préférons que les instances de composants de ces balises soient mises en cache lors de leur première création. Pour résoudre ce problème, nous pouvons envelopper son composant dynamique avec un élément
<!-- 失活的组件将会被缓存！--> <keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive>
Vous pouvez voir des exemples de composants dynamiques ici. https://jsfiddle.net/chrisvfritz/Lp20op9o/
dom标签内使用组件
有些 HTML 元素，诸如