Que sont les composants visibles ? Explication détaillée de l'utilisation

Dans le monde du développement front-end, Vue.js est un framework très populaire qui nous permet de créer des applications Web plus efficacement. L'un des aspects les plus intéressants de Vue.js est son système de composants, qui peut nous aider à organiser le code et à améliorer la maintenabilité et l'évolutivité. Dans cet article, nous expliquerons en détail ce que sont les composants Vue.js et comment les créer et les utiliser.

Que sont les composants Vue.js ?

Les composants Vue.js sont des instances Vue réutilisables qui peuvent nous aider à diviser une application complexe en plusieurs parties plus petites et réutilisables. Chaque composant possède son propre modèle HTML, son code JavaScript et ses styles CSS qui peuvent être utilisés à plusieurs reprises dans différentes pages.

Par exemple, nous pouvons diviser un composant de formulaire de connexion simple en trois composants suivants : un composant de formulaire pour saisir le nom d'utilisateur et le mot de passe, un composant pour vérifier les informations d'identification via l'API et un composant pour afficher l'état de connexion. L'utilisation des composants Vue.js peut rendre le code plus facile à maintenir et à gérer.

Création d'un composant Vue.js

Créer un composant Vue.js est très simple. Il nous suffit de définir une instance Vue et de l'enregistrer via la méthode Vue.component. Voici un exemple :

Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  data: function () {
    return {
      message: 'Hello, World!'
    }
  }
})

Dans cet exemple, nous définissons un composant appelé my-component. Il possède un modèle HTML simple, où le message est une variable, qui sera rendue dynamiquement par Vue.js. Ce modèle affiche un élément div avec le message « Hello, World ! »

Utilisation des composants Vue.js

Une fois que vous avez enregistré le composant, vous pouvez utiliser ce composant en JavaScript et l'appeler dans des modèles HTML. Voici un exemple d'utilisation de composants :

<div id="app">
  <my-component></my-component>
</div>

Dans cet exemple, nous utilisons le composant my-component que nous venons de définir dans un modèle HTML. Cela amènera Vue.js à restituer automatiquement ce composant lors du chargement de la page et à l'insérer dans le div avec l'identifiant "app".

Données des composants

Différentes des instances ordinaires de Vue.js, les instances de composants sont indépendantes les unes des autres et ne partagent pas de données. C'est pourquoi nous devons utiliser les attributs props et les méthodes $emit pour transmettre des informations entre eux.

Attribut props : L'attribut props peut nous aider à transmettre des données d'un composant à un autre composant. Par exemple, nous pouvons définir un accessoire appelé "my-prop" en utilisant :

Vue.component('my-component', {
  props: ['myProp'],
  template: '<div>{{ myProp }}</div>'
})

Dans ce composant, nous définissons un accessoire appelé "my-prop" et l'utilisons dans le modèle. Nous pouvons transmettre la valeur de cet accessoire du composant parent au composant petit-enfant afin que nous puissions obtenir la valeur à utiliser dans le composant petit-enfant.

Méthode $emit : Si vous souhaitez transmettre des données d'un composant au composant parent, vous pouvez utiliser la méthode $emit. Par exemple, dans un composant enfant, nous pouvons transmettre la valeur myValue au composant parent de la manière suivante :

Vue.component('my-component', {
  template: '<button @click="$emit(\&#39;my-event\&#39;, myValue)">Click me</button>',
  data: function () {
    return {
      myValue: 'Hello, World!'
    }
  }
})

Dans ce composant, nous avons défini un bouton qui lorsque l'utilisateur clique dessus, il déclenche un appel au parent composant appelé événement « my-event » et transmettez la valeur myValue. Dans le composant parent, nous pouvons capturer les événements par :

<my-component @my-event="handleMyEvent"></my-component>

methods: {
  handleMyEvent: function (value) {
    console.log(value) // 'Hello, World!'
  }
}

Dans cet exemple, nous utilisons la syntaxe @my-event pour écouter l'événement my-event. Lorsque l'événement est déclenché, il appelle la méthode handleMyEvent. Dans cette méthode, nous générons la valeur transmise du composant enfant au composant parent.

Résumé

Le composant Vue.js est un outil très utile qui peut nous aider à mieux organiser et gérer le code. Dans cet article, nous avons donné une brève introduction à ce que sont les composants Vue.js et à la façon de créer, d'utiliser et de transmettre des données. J'espère que cet article vous a fourni les bases des composants Vue.js et vous a donné une compréhension plus approfondie de Vue.js.

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!