Vue3 : composants

Chaque composant Vue est une instance Vue indépendante avec son propre template, ses propres données, ses méthodes et ses hooks de cycle de vie, ce qui permet aux composants de définir et gérer leurs propres fonctionnalités et styles de manière autonome.

Les composants sont l'une des fonctionnalités les plus puissantes de Vue.js.

Les composants peuvent étendre les éléments HTML, encapsuler du code réutilisable et vous aider à diviser votre interface utilisateur en parties indépendantes et réutilisables.

Fonctionnalités et avantages des composants Vue

Réutilisabilité: Les composants peuvent être utilisés plusieurs fois à différents endroits, ce qui améliore la réutilisabilité et la maintenabilité du code.
Encapsulation: Chaque composant est une portée indépendante qui encapsule son propre état et sa propre logique, évitant la pollution globale.
Composabilité: Des interfaces complexes peuvent être construites en combinant plusieurs petits composants.
Réactivité: Les données du composant sont liées de manière réactive à la vue, et la vue se met à jour automatiquement lorsque les données changent.
Modularité: Le développement modulaire est pris en charge, et des chaînes d'outils front-end modernes peuvent être utilisées pour la construction et la gestion.

Le système de composants nous permet de construire de grandes applications avec de petits composants indépendants et réutilisables. Presque tout type d'interface d'application peut être abstrait en un arbre de composants :

Chaque application Vue est créée à l'aide de la fonction createApp. Les options passées à createApp servent à configurer le composant racine. Lorsque nous montons l'application, ce composant est utilisé comme point de départ pour le rendu.

Une application doit être montée sur un élément DOM.

Dans l'exemple suivant, nous montons l'application Vue sur

, et #app doit être passé :

const RootComponent = { /* 选项 */ }
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

La syntaxe d'enregistrement d'un composant global est la suivante :

const app = Vue.createApp({...})

app.component('my-component-name', {
  /* ... */
})

my-component-nameest le nom du composant,/* ... */la partie correspond aux options de configuration. Après l'enregistrement, nous pouvons appeler le composant de la manière suivante :

<my-component-name></my-component-name>

Un exemple simple de composant Vue :

Exemple de composant global

Enregistrez un exemple de composant global simple et utilisez-le :

<div id="app"> <example></example> </div> <script>// Créer une application Vue const app = Vue.createApp({}) // Définir un nouveau composant global nommé example app.component('example', { template: '<h1>Composant personnalisé!</h1>' }) app.mount('#app') </script>

Essayez-le »

Ensuite, enregistrons un composant button-counter. Après chaque clic, le compteur augmentera de 1 :

Exemple

// Créer une application Vue
const app = Vue.createApp({})

// Définir un nouveau composant global nommé button-counter
app.component('button-counter', {
data() {
return {
count: 0
}
},
template: `
<button @click="count++">
Cliqué{{ count }}fois !
</button>`
})
app.mount('#app')
</script>

Essayez-le »

Remarque: Dans le template,`est un backtick, pas une apostrophe.'。

Réutilisation des composants

Vous pouvez réutiliser un composant autant de fois que vous le souhaitez :

Exemple

Essayez-le »

Composants globaux

Dans les exemples ci-dessus, nos composants sont tous enregistrés globalement à l'aide de la méthode component.

Les composants enregistrés globalement peuvent être utilisés dans les templates des instances d'application créées par la suite, y compris les templates de tous les composants enfants dans l'arbre de composants de l'instance racine.

Exemple de composant global

Enregistrez un exemple de composant global simple et utilisez-le :

Essayez-le »

Composants locaux

L'enregistrement global n'est souvent pas idéal. Par exemple, si vous utilisez un système de build comme webpack, enregistrer globalement tous les composants signifie que même si vous n'utilisez plus un composant, il sera quand même inclus dans votre résultat de build final. Cela entraîne une augmentation inutile du JavaScript téléchargé par les utilisateurs.

Dans ces cas, vous pouvez définir un composant avec un objet JavaScript simple :

const ComponentA = {
  /* ... */
}
const ComponentB = {
  /* ... */
}
const ComponentC = {
  /* ... */
}

Définissez ensuite les composants que vous souhaitez utiliser dans l'option components :

const app = Vue.createApp({
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

Pour chaque propriété de l'objet components, le nom de la propriété est le nom de l'élément personnalisé (component-a, component-b), et la valeur de la propriété est l'objet d'options du composant (ComponentA, ComponentB).

Nous pouvons également enregistrer des composants locaux dans l'option d'instance, afin que le composant ne puisse être utilisé que dans cette instance :

Exemple de composant local

Enregistrez un composant local simple exampleA et utilisez-le :

<div id="app"> <example-a></example-a> </div> <script> var exampleA = { template: '<h1>Composant personnalisé !</h1>' } const app = Vue.createApp({ components: { 'example-a': exampleA } }) app.mount('#app') </script>

Essayez-le »

Composants monofichiers (fichiers .vue)

L'utilisation de composants monofichiers vous permet de mieux organiser et gérer les composants Vue. Un composant se compose généralement de trois parties : template, script et style.

Exemple

<template>
<div>
<p>{{ message }}</p>
<button @click="increment">Increment</button>
</div>
</template>

<script>
export default {
data() {
return {
message: 'Bonjour depuis MyComponent',
count: 0
};
},
methods: {
increment() {
this.count++;
}
}
};
</script>

<style scoped>
/* Styles privés du composant */
p {
color: blue;
}
</style>

Prop

prop est un attribut personnalisé utilisé par les composants enfants pour recevoir des données transmises par les composants parents.

Les données du composant parent doivent être transmises aux composants enfants via les props, et les composants enfants doivent déclarer explicitement "prop" à l'aide de l'option props :

Exemple de prop

<div id="app"> <site-name title="Google"></site-name> <site-name title="Example"></site-name> <site-name title="Taobao"></site-name> </div> <script> const app = Vue.createApp({}) app.component('site-name', { props: ['title'], template: `<h4>{{ title }}</h4>` }) app.mount('#app') </script>

Essayez-le »

Un composant peut avoir n'importe quel nombre de props par défaut, et n'importe quelle valeur peut être transmise à n'importe quelle prop.

Props dynamiques

Similaire à la liaison d'attributs HTML à une expression avec v-bind, vous pouvez également utiliser v-bind pour lier dynamiquement les valeurs de prop aux données du composant parent. Chaque fois que les données du composant parent changent, la modification sera également transmise au composant enfant :

Exemple de prop

<div id="app"> <site-info v-for="site in sites" :id="site.id" :title="site.title" ></site-info> </div> <script> const Site = { data() { return { sites: [ { id: 1, title: 'Google' }, { id: 2, title: 'Example' }, { id: 3, title: 'Taobao' } ] } } } const app = Vue.createApp(Site) app.component('site-info', { props: ['id','title'], template: `<h4>{{ id }} - {{ title }}</h4>` }) app.mount('#app') </script>

Essayez-le »

Validation des props

Les composants peuvent spécifier des exigences de validation pour les props.

Pour personnaliser la méthode de validation des props, vous pouvez fournir un objet avec des exigences de validation pour les valeurs des props, au lieu d'un tableau de chaînes. Par exemple :

Vue.component('my-component', {
  props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

Lorsque la validation de prop échoue, Vue (dans la version de développement) produira un avertissement dans la console.

type peut être l'un des constructeurs natifs suivants :

String
Number
Boolean
Array
Object
Date
Function
Symbol

type peut également être un constructeur personnalisé, vérifié à l'aide de instanceof.

Autres extensions

Manuel de référence

Cas pratique 1

Cas pratique 2

Vue3 : composants

Fonctionnalités et avantages des composants Vue

Exemple de composant global

Exemple

Réutilisation des composants

Exemple

Composants globaux

Exemple de composant global

Composants locaux

Exemple de composant local

Composants monofichiers (fichiers .vue)

Exemple

Prop

Exemple de prop

Props dynamiques

Exemple de prop

Validation des props