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

Vue.component('my-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
})

new Vue({ el: '#app' })</pre>
Copier après la connexion

est

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

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

<div>
  <my-counter></my-counter>
</div></pre>
Copier après la connexion

) 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>, </pre>

et le composant MyCounter peut ressembler à ceci:

Vue.component('my-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
})

new Vue({ el: '#app' })</pre>
Copier après la connexion

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:

<div>
  <my-counter></my-counter>
</div></pre>
Copier après la connexion

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:

<template>
  <div>{{ count }}</div>
</template>

<🎜></pre>
Copier après la connexion

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:

<blogpost>
  <authordetails></authordetails>
  <postdetails></postdetails>
  <comments></comments>
</blogpost></pre>
Copier après la connexion

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

:

new Vue({
  el: '#app',
  data() {
    return {
      author: {
        name: 'John Doe',
        email: 'jdoe@example.com'
      }
    }
  }
})</pre>
Copier après la connexion

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:

<div>
  <author-detail :owner="author"></author-detail>
</div></pre>
Copier après la connexion

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

Vue.component('author-detail', {
  template: `
    <div>
      <h2>{{ owner.name }}</h2>
      <p>{{ owner.email }}</p>
    </div>
  `,
  props: ['owner']
})</pre>
Copier après la connexion

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

<script></code> 和 <code>&lt;style&gt;</code> 部分。</p> <p>对于上面的示例，App 组件可能如下所示：</p> <pre class="brush:php;toolbar:false"><code class="language-vue">&lt;template&gt; <div> <my-counter></my-counter> </div> </template> <script> import myCounter from './components/myCounter.vue' export default { name: 'app', components: { myCounter } } </script>Les événements

sont gérés en créant des méthodes de wrapper qui sont déclenchées lorsque l'événement sélectionné se produit. Pour examiner, élargissons en fonction de notre compteur initial pour qu'il augmente chaque fois que le bouton est cliqué.

Nos composants devraient ressembler à ceci:

Vue.component('my-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
})

new Vue({ el: '#app' })</pre>
Copier après la connexion

et notre modèle:

<div>
  <my-counter></my-counter>
</div></pre>
Copier après la connexion

Cet espoir est assez simple. Comme vous pouvez le voir, nous nous connectons à l'événement onClick pour déclencher une méthode personnalisée increase chaque fois que le bouton est cliqué. La méthode increase incrémente ensuite nos attributs de données count. Maintenant, élargissons l'exemple, déplacez le bouton du compteur dans un composant séparé et affichons le nombre dans le composant parent. Nous pouvons le faire en utilisant un bus d'événements.

Le bus d'événements est très pratique lorsque vous souhaitez communiquer des composants enfants aux composants parents. Ceci est contraire à la méthode de communication par défaut, qui est du composant parent au composant enfant. Si votre application n'est pas assez grande pour ne pas avoir besoin de Vuex, vous pouvez utiliser le bus d'événements. (Vous pouvez en savoir plus à ce sujet dans le "Vuex Getting Started Guide" dans cette série Vue.)

Donc, ce que nous devons faire est: le nombre sera déclaré dans le composant parent et transmis au composant enfant. Ensuite, dans le composant enfant, nous voulons incrémenter la valeur de count et nous assurer que la valeur dans le composant parent est mise à jour.

Les composants de l'application ressembleront à ceci:

<template>
  <div>{{ count }}</div>
</template>

<🎜></pre>
Copier après la connexion

Ensuite, dans le composant enfant, nous voulons recevoir le nombre par les accessoires et avoir un moyen d'incrémenter. Nous ne voulons pas afficher la valeur de count dans le composant enfant. Nous voulons juste incrémenter à partir du composant enfant et le faire réfléchir dans le composant parent:

<blogpost>
  <authordetails></authordetails>
  <postdetails></postdetails>
  <comments></comments>
</blogpost></pre>
Copier après la connexion

Ensuite, notre modèle ressemblera à ceci:

new Vue({
  el: '#app',
  data() {
    return {
      author: {
        name: 'John Doe',
        email: 'jdoe@example.com'
      }
    }
  }
})</pre>
Copier après la connexion

Si vous essayez d'augmenter la valeur comme celle-là, cela ne fonctionnera pas. Pour que cela fonctionne, nous devons émettre un événement à partir du composant enfant, envoyer une nouvelle valeur de count et également écouter cet événement dans le composant parent.

Tout d'abord, nous créons une nouvelle instance Vue et la définissons sur eventBus:

<div>
  <author-detail :owner="author"></author-detail>
</div></pre>
Copier après la connexion

Nous pouvons désormais utiliser un bus d'événements dans nos composants. Le sous-composant ressemblera à ceci:

Vue.component('author-detail', {
  template: `
    <div>
      <h2>{{ owner.name }}</h2>
      <p>{{ owner.email }}</p>
    </div>
  `,
  props: ['owner']
})</pre>
Copier après la connexion

événements chaque fois que la méthode increment est appelée. Nous devons écouter l'événement dans le composant principal et définir count à la valeur que nous obtenons de l'événement émis:

Vue.component('author-detail', {
  template: `
    <div>
      <h2>{{ owner.name }}</h2>
      <p>{{ owner.email }}</p>
    </div>
  `,
  props: {
    owner: {
      type: Object,
      required: true
    }
  }
})</pre>
Copier après la connexion

Notez que nous utilisons la méthode du cycle de vie de Vue created pour nous connecter au composant avant d'être monté et configurer le bus d'événements.

Si votre application n'est pas complexe, l'utilisation du bus d'événements est bonne, mais n'oubliez pas que votre application se développe, vous voudrez peut-être utiliser Vuex à la place.

Utiliser le contenu dans les composants imbriqués des machines à sous

Dans les exemples que nous avons vus jusqu'à présent, les composants sont des éléments d'autocollage. Cependant, afin de créer des composants qui peuvent être regroupés de manière utile, nous devons être capables de les nid les uns avec les autres comme nous le ferions avec des éléments HTML.

Si vous essayez d'utiliser un composant avec une balise de fin et mettez du contenu à l'intérieur, vous verrez que Vue l'a avalé. Tout ce qui entre les balises de début et de fin d'un composant sera remplacé par la sortie de rendu du composant lui-même:

Vue.component('my-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `<div>{{ count }}</div>`
})

new Vue({ el: '#app' })</pre>
Copier après la connexion

Heureusement, les emplacements de Vue permettent de transmettre des valeurs arbitraires au composant. Cela peut être n'importe quoi, du composant parent au composant enfant, de l'élément DOM vers d'autres données. Voyons comment ils fonctionnent.

La partie de script du composant

ressemblera à ceci:

<div>
  <my-counter></my-counter>
</div></pre>
Copier après la connexion

Ensuite, le modèle ressemblera à ceci:

<template>
  <div>{{ count }}</div>
</template>

<🎜></pre>
Copier après la connexion

Le contenu dans le composant

<list> sera rendu entre les étiquettes <slot> élément. Nous pouvons également utiliser le contenu de secours au cas où le composant parent n'injecte rien.

<blogpost>
  <authordetails></authordetails>
  <postdetails></postdetails>
  <comments></comments>
</blogpost></pre>
Copier après la connexion

S'il n'y a pas de contenu du composant parent, le contenu de secours sera rendu.

Conclusion

Il s'agit d'une introduction de haut niveau à l'utilisation de composants en Vue. Nous avons examiné comment créer des composants dans Vue, comment communiquer des composants du parent aux enfants via des accessoires, et comment communiquer de l'enfant aux composants parents sur le bus de l'événement. Nous finissons ensuite en regardant les machines à sous, un moyen pratique de combiner les composants d'une manière utile. J'espère que vous trouverez ce tutoriel utile.

(La partie FAQ est omise car elle est trop longue et ne correspond pas à l'objectif pseudo-original. Une partie du contenu FAQ peut être réécrite au besoin, mais l'intention d'origine doit être maintenue inchangée.)

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!