Composants Vue.js

Les composants sont des unités uniques et indépendantes d'une interface. Ils peuvent avoir leur propre état, balisage et style.

Les composants sont des unités uniques et indépendantes d'une interface. Ils peuvent avoir leur propre état, balisage et style.

Comment utiliser les composants

Les composants Vue peuvent être définis de 4 manières principales.

Parlons en code.

Le premier est:

new Vue({
  /* options */
})

Le second est:

Vue.component('component-name', {
  /* options */
})

Le troisième consiste à utiliser des composants locaux: des composants qui ne sont accessibles que par un composant spécifique, et qui ne sont pas disponibles ailleurs (idéal pour l'encapsulation).

Le quatrième est en.vuefichiers, également appelésComposants de fichier unique.

Plongeons dans les 3 premières manières en détail.

Utilisantnew Vue()ouVue.component()est le moyen standard d'utiliser Vue lorsque vous créez une application qui n'est pas une application à page unique (SPA) mais qui utilise plutôt Vue.js uniquement dans certaines pages, comme dans un formulaire de contact ou dans le panier. Ou peut-être que Vue est utilisé dans toutes les pages, mais le serveur rend la mise en page et vous servez le HTML au client, qui charge ensuite l'application Vue que vous créez.

Dans un SPA, où c'est Vue qui construit le HTML, il est plus courant d'utiliser des composants à fichier unique car ils sont plus pratiques.

Vous instanciez Vue en le montant sur un élément DOM. Si tu as un<div id="app"></div>tag, vous utiliserez:

new Vue({ el: '#app' })

Un composant initialisé avecnew Vuen'a pas de nom de balise correspondant, c'est donc généralement le composant principal du conteneur.

Les autres composants utilisés dans l'application sont initialisés à l'aide deVue.component(). Un tel composant vous permet de définir une balise, avec laquelle vous pouvez incorporer le composant plusieurs fois dans l'application, et de spécifier la sortie du composant dans letemplatebiens:

<div id="app">
  <user-name name="Flavio"></user-name>
</div>
Vue.component('user-name', {
  props: ['name'],
  template: '<p>Hi {{ name }}</p>'
})

new Vue({ el: ‘#app’ })

Tech Wiki Online!