Maison > Article > interface Web > Quelles sont les méthodes de base d’utilisation des composants vue ?

Quelles sont les méthodes de base d’utilisation des composants vue ?

php中世界最好的语言original: 2018-06-01 11:24:441067parcourir

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.

Enregistrement des composants

Enregistrement global

Créez des composants via Vue.component :

 Vue.component('my-component-name', {
 // ... 选项 ...
 })

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 :

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 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 = { /* ... */ }

Définissez ensuite le composant que vous souhaitez utiliser dans les options des composants :

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é 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
 },
 // ...
}

Utiliser les composants enregistrés dans Babel et webpack

import ComponentA from './ComponentA.vue'
export default {
 components: {
 ComponentA
 },
 // ...
}

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
}

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
 }
}

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 transmis via

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component></p>
<p style="text-align: left;">你会注意到，如果你选择了一篇文章，切换到 Archive 标签，然后再切换回 Posts，是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候，Vue 都创建了一个新的 currentTabComponent 实例。</p>
<p style="text-align: left;">重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。</p>
<pre class="brush:php;toolbar:false"><!-- 失活的组件将会被缓存！-->
<keep-alive>
 <component v-bind:is="currentTabComponent"></component>
</keep-alive>

可以在这里查看动态组件例子。https://jsfiddle.net/chrisvfritz/Lp20op9o/

dom标签内使用组件

有些 HTML 元素，诸如

Quelles sont les méthodes de base d’utilisation des composants vue ?

Articles Liés