Instance de composant Vue

Dans Vue.js, une instance de composant est l'un des éléments constitutifs les plus fondamentaux d'une application Vue. Chaque instance de composant est un composant Vue qui possède son propre template, ses propres données, méthodes et hooks de cycle de vie, et peut gérer indépendamment son propre état et comportement. Voici une introduction détaillée aux instances de composants Vue :

Création d'une instance de composant Vue

Dans Vue.js, une instance de composant est généralement créée à l'aide de la méthode createApp et d'un objet d'options de composant.

L'objet d'options de composant peut contenir les propriétés suivantes :

  • data: Objet de données, utilisé pour stocker les données réactives du composant.
  • props: Tableau ou objet Props, utilisé pour recevoir les données transmises par le composant parent.
  • computed: Objet de propriétés calculées, calculé dynamiquement en fonction des dépendances réactives.
  • methods: Objet Methods, contenant les fonctions et opérations au sein du composant.
  • watch: Objet Watchers, utilisé pour surveiller les changements de données et réagir en conséquence.
  • template: String, définissant la structure de template du composant.
  • render: Function, utilisée pour rendre le DOM virtuel du composant.
  • setup: Function, utilisée pour configurer l'état initial du composant, les données, les propriétés calculées et les observateurs (dans Vue 3).

Voici un exemple d'instance de composant Vue simple :

Exemple

import { createApp } from 'vue';

const app = createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    greet() {
      alert(this.message);
    }
  },
  template: `
    <div>
      <p>{{ message }}</p>
      <button @click="greet">Saluer</button>
    </div>
  `
});

app.mount('#app');

Explication :

  • dataLa fonction renvoie un objet contenant unemessagepropriété, utilisée pour stocker l'état du composant.
  • methodsL'objet contient unegreetméthode ; lorsque le bouton est cliqué, une boîte d'alerte apparaît, affichantmessagele contenu de.
  • templateLa chaîne définit la structure du template du composant, en utilisant l'interpolation et la liaison d'événements pour réaliser l'affichage des données et l'interaction.

Hooks de cycle de vie

Les instances de composant Vue disposent de fonctions de hook de cycle de vie qui permettent aux développeurs d'exécuter une logique personnalisée à différentes étapes du cycle de vie du composant. Les hooks de cycle de vie courants incluentcreated、mounted、updatedetdestroyedetc.

Exemple

const app = createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  created() {
    console.log('Component created');
  },
  mounted() {
    console.log('Component mounted');
  },
  updated() {
    console.log('Component updated');
  },
  destroyed() {
    console.log('Component destroyed');
  },
  template: `
    <div>
      <p>{{ message }}</p>
    </div>
  `
});

Communication entre composants

Les instances de composant Vue communiquent entre elles via props, événements, provide/inject, $parent/$children, $attrs/$listeners et d'autres méthodes, selon la relation entre les composants et leurs besoins. Ces mécanismes permettent aux composants de transmettre des données entre différents niveaux et de répondre aux interactions de l'utilisateur.

Propriétés de l'instance de composant

$data

La propriété $data contient toutes les propriétés de données de l'instance de composant. Elle est réactive, ce qui signifie que lorsque les données changent, les vues associées sont automatiquement mises à jour.

Exemple

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
});

const vm = app.mount('#app');
console.log(vm.$data); // { message: 'Hello, Vue!' }

$props

La propriété $props contient toutes les props transmises par le composant parent que le composant actuel reçoit. Elle est en lecture seule.

Exemple

<!-- ParentComponent.vue -->
<template>
  <child-component :message="parentMessage"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Message du parent'
    };
  }
};
</script>

Exemple

// ChildComponent.vue
export default {
  props: ['message'],
  mounted() {
    console.log(this.$props.message); // 'Message du parent'
  }
};

$refs

$refs contient tous les éléments DOM ou instances de composants enfants au sein du composant qui ont l'attribut ref. Ces éléments ou instances de composants sont accessibles via $refs.

Exemple

<template>
  <div>
    <input type="text" ref="inputField">
  </div>
</template>

<script>
export default {
  mounted() {
console.log(this.$refs.inputField); // Accéder à l'élément DOM
this.$refs.inputField.focus(); // Appeler la méthode de l'élément DOM
  }
}
</script>

La propriété $el représente l'élément DOM racine de l'instance de composant actuelle. Cette propriété n'est accessible qu'après le montage du composant.

Exemple

const app = Vue.createApp({
  template: '<div>Bonjour, Vue !</div>'
});

const vm = app.mount('#app');
console.log(vm.$el); // <div id="app">Bonjour, Vue !</div>

$attrs

$attrs contient tous les attributs transmis du composant parent au composant actuel mais non déclarés dans le composant enfant. Ces attributs peuvent être utilisés pour transmettre des attributs non-prop supplémentaires aux composants enfants.

Exemple

<!-- ParentComponent.vue -->
<template>
  <child-component custom-attr="value"></child-component>
</template>

<!-- ChildComponent.vue -->
<script>
export default {
  mounted() {
    console.log(this.$attrs); // { custom-attr: 'value' }
  }
};
</script>

$listeners

$listeners contient tous les écouteurs (gestionnaires d'événements) transmis du composant parent au composant actuel, et peut être directement lié à l'élément racine du composant ou à d'autres éléments.

Exemple

<!-- ChildComponent.vue -->
<template>
  <button v-on="$listeners">Cliquez-moi</button>
</template>

<script>
export default {
  mounted() {
    console.log(this.$listeners); // { click: handleClick }
  },
  methods: {
    handleClick() {
      console.log('Bouton cliqué');
    }
  }
};
</script>

Méthodes d'instance de composant

$mount()

La méthode $mount() monte manuellement un composant Vue sur un élément DOM. Dans Vue 3, le montage est généralement effectué automatiquement via createApp().mount(), et le montage manuel n'est nécessaire que dans quelques cas.

Exemple

const app = Vue.createApp({
  template: '<div>Bonjour, Vue !</div>'
});

const vm = app.mount('#app');

$destroy()

La méthode $destroy() détruit l'instance de composant actuelle, dissocie tous ses écouteurs d'événements et libère les ressources qu'elle occupe. Elle est utile dans des scénarios spécifiques, tels que la création et la destruction dynamiques de composants.

Exemple

vm.$destroy();

$emit()

La méthode $emit() est utilisée pour déclencher des événements personnalisés sur l'instance de composant actuelle et transmettre des données au composant parent. Elle est généralement utilisée avec la directive v-on.

Exemple

<button @click="$emit('custom-event', eventData)">Cliquez-moi</button>

$nextTick()

La méthode $nextTick() exécute la fonction de rappel spécifiée après la fin du prochain cycle de mise à jour du DOM. Elle est utilisée pour effectuer certaines opérations après la mise à jour du DOM.

Exemple

vm.$nextTick(() => {
  // Opérations effectuées après que la mise à jour du DOM est terminée
});

$watch()

La méthode $watch() est utilisée pour surveiller les changements de données sur l'instance du composant et exécuter la fonction de rappel spécifiée lorsque les données changent.

Exemple

vm.$watch('message', (newValue, oldValue) => {
  console.log(`Message changé de ${oldValue} à ${newValue}`);
});

Ces propriétés et méthodes donnent aux instances de composants Vue une fonctionnalité et une flexibilité riches, capables de répondre aux divers besoins des développeurs lors de la construction d'applications complexes. De la gestion des données à la gestion des événements, puis aux opérations dynamiques sur les composants, tout peut être géré et contrôlé via les instances de composants.

Autres extensions