Bases des composants Vue

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 8c05085041e56efcb85463966dd1cb7e de Vue :

<!-- 组件会在 `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 7c9485ff8c3cba5ae9343ed63c2dc3f7

<!-- 失活的组件将会被缓存！-->
<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 元素，诸如 ff6d136ddc5fdfeffaf53ff6ee95f185、c34106e0b4e09414b63b2ea253ff83d6、f5d188ed2c074f8b944552db028f98a1 和 221f08282418e2996498697df914ce4e，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 25edfb22a4f469ecb59f1190150159c6、a34de1251f0d9fe1e645927f19a896e8 和 5a07473c87748fb1bf73f23d45547ab8，只能出现在其它某些特定的元素内部。

这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

<table>
 <blog-post-row></blog-post-row>
</table>

这个自定义组件 03ec9a72fb73e8d58de61791d006e075 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：

<table>
 <tr is="blog-post-row"></tr>
</table>

相关推荐：

vue组件中slot插口使用详解

vue组件写法规范

vue组件与复用使用详解

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!