Un guide du débutant pour travailler avec des composants à Vue

L'architecture des composants

Vue.js rend la construction d'une interface utilisateur efficace et pratique. Il vous permet de décomposer votre application en composants plus petits et réutilisables, puis de construire des structures plus complexes avec ces composants.

Ce guide vous fournira une introduction avancée aux composants Vue. Nous explorerons comment créer des composants, comment transmettre des données entre les composants (via les accessoires et les bus d'événements) et comment rendre un contenu supplémentaire dans les composants à l'aide de l'élément <slot></slot> de Vue. Chaque exemple sera livré avec une démo de codepen coulable.

Points clés

L'architecture composante de
• Vue aide à décomposer l'interface utilisateur en extraits réutilisables et faciles à gérer, améliorant ainsi la réutilisabilité et l'organisation du code.
Les composants
• peuvent être créés à l'échelle mondiale en utilisant Vue.component ou localement dans des composants uniflemaires.
• Les données peuvent être transmises aux sous-composants à l'aide d'accessoires, fournissant un moyen clair et structuré de gérer et de passer les données dans l'arborescence des composants.
• Le bus d'événements peut être utilisé pour gérer efficacement la communication des composants enfants aux composants parents, permettant aux composants enfants de renvoyer des données à la hiérarchie des composants.
L'élément
• Vue de Vue aide à nidiquer le contenu dans le composant, le rendant plus flexible et capable de recevoir du contenu du composant parent, qui peut être écrasé avec du contenu de secours. <slot></slot>

Comment créer des composants dans Vue Les composants

sont essentiellement des instances Vue réutilisables avec des noms. Il existe de nombreuses façons de créer des composants dans une application VUE. Par exemple, dans des projets de petite à moyenne taille, vous pouvez enregistrer des composants globaux en utilisant la méthode

comme suit: Vue.component

Le nom du composant

<code class="language-javascript">Vue.component('my-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
})

new Vue({ el: '#app' })</code>

est

. Il peut être utilisé comme ceci: my-counter

Lorsque vous nommez un composant, vous pouvez choisir d'utiliser le kebab-case (

<code class="language-html"><div>
  <my-counter></my-counter>
</div></code>

) ou le cascal-casal (

). Lors du référencement des composants dans des modèles, l'une ou l'autre variante peut être utilisée, mais lors du référencement des composants directement dans le DOM (comme indiqué dans l'exemple ci-dessus), seul le nom de balise de case de kebab est valide. my-custom-component MyCustomComponent Vous pouvez également remarquer que dans l'exemple ci-dessus, est une fonction qui renvoie l'objet littéral (plutôt que l'objet littéral lui-même). Le but de cela est de permettre à chaque instance du composant d'avoir son propre objet de données sans avoir à partager une instance globale avec toutes les autres instances.

Il existe plusieurs façons de définir les modèles de composants. Ci-dessus, nous avons utilisé des littéraux de modèle, mais nous pouvons également utiliser des marqueurs avec

ou des modèles à l'intérieur du DOM. Vous pouvez en savoir plus sur les différentes façons de définir les modèles ici. data

Composant de fichier unique text/x-template

Dans des projets plus complexes, les composants mondiaux peuvent rapidement devenir difficiles à gérer. Dans ce cas, il est logique de concevoir votre application pour utiliser un seul composant de fichier. Comme son nom l'indique, ce sont des fichiers uniques avec des extensions .vue qui contiennent <template></template>,

et le composant MyCounter peut ressembler à ceci:

<code class="language-javascript">Vue.component('my-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
})

new Vue({ el: '#app' })</code>

Comme vous pouvez le voir, lorsque vous utilisez des composants de fichiers uniques, vous pouvez les importer et les utiliser directement dans les composants qui les nécessitent.

Vue.component() Dans ce guide, j'utiliserai la méthode

pour enregistrer le composant pour afficher tous les exemples.

L'utilisation de composants unifils implique souvent des étapes de construction (par exemple, en utilisant Vue CLI). Si vous voulez en savoir plus, consultez le "Vue CLI Gute Started Guide" dans cette série VUE.

Transférer des données vers des composants via des accessoires

Les accessoires nous permettent de transmettre les données du composant parent au composant enfant. Cela permet à nos composants d'être divisés en morceaux plus petits pour gérer des fonctions spécifiques. Par exemple, si nous avons un composant de blog, nous voulons peut-être afficher des informations telles que les détails de l'auteur, les détails de la publication (titre, corps et image) et commentaires.

Nous pouvons les diviser en composants enfants afin que chaque composant traite des données spécifiques, ce qui fait ressembler l'arborescence des composants:

<code class="language-html"><div>
  <my-counter></my-counter>
</div></code>

Si vous ne croyez toujours pas aux avantages de l'utilisation de composants, prenez un moment pour réaliser à quel point cette combinaison est utile. Si vous souhaitez revisiter ce code à l'avenir, vous serez immédiatement clair sur la façon dont la page est construite et où vous devez rechercher la fonctionnalité (c'est-à-dire dans quel composant). Cette façon déclarative de combiner les interfaces permet également à ceux qui ne connaissent pas plus facilement la base de code pour commencer rapidement et améliorer l'efficacité.

Étant donné que toutes les données seront transmises à partir du composant parent, cela pourrait ressembler à ceci:

<code class="language-vue"><template>
  <div>{{ count }}</div>
</template>

</code>

author-detail Dans l'exemple ci-dessus, nous définissons les détails de l'auteur et publions des informations. Ensuite, nous devons créer les composants enfants. Nommez le composant enfant

. Par conséquent, notre modèle HTML ressemblera à ceci:

<code class="language-html"><blogpost>
  <authordetails></authordetails>
  <postdetails></postdetails>
  <comments></comments>
</blogpost></code>

owner Nous transmettons l'objet d'auteur au composant enfant sous forme d'accessoires nommés owner. Il est nécessaire de faire attention à la différence ici. Dans un composant enfant, author est le nom d'accessoires que nous recevons des données du composant parent. Les données que nous voulons recevoir sont appelées

, que nous définissons dans le composant parent.

author-detail Pour accéder à ces données, nous devons déclarer des accessoires dans le composant

:

<code class="language-javascript">new Vue({
  el: '#app',
  data() {
    return {
      author: {
        name: 'John Doe',
        email: 'jdoe@example.com'
      }
    }
  }
})</code>

Nous pouvons également permettre la vérification lors du passage des accessoires pour garantir que les données correctes sont passées. Ceci est similaire aux propypes dans React. Pour permettre la vérification dans l'exemple ci-dessus, modifiez notre composant pour ressembler à ceci:

<code class="language-html"><div>
  <author-detail :owner="author"></author-detail>
</div></code>

Si nous passons le mauvais type d'hélice, vous verrez une erreur dans la console similaire à ce que j'ai montré ci-dessous:

<code class="language-javascript">Vue.component('author-detail', {
  template: `
    <div>
      <h2>{{ owner.name }}</h2>
      <p>{{ owner.email }}</p>
    </div>
  `,
  props: ['owner']
})</code>

Il existe un guide officiel dans la documentation VUE que vous pouvez utiliser pour comprendre la vérification des accessoires.

Communication du composant enfant en composant parent via l'événement bus

• Une analyse approfondie du composant de groupe de liste Bootstrap
• Explication détaillée du currying de la fonction JavaScript
• Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
• Angularjs intègre l'interface utilisateur WeChat (weui)
• Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript