Vue.js
Composants

Remarques

Composant de portée (non global)

Démo

HTML

<script type="x-template" id="form-template">
    <label>{{inputLabel}} :</label>
  <input type="text" v-model="name" />
</script>

<div id="app">
  <h2>{{appName}}</h2>
  <form-component title="This is a form" v-bind:name="userName"></form-component>
</div>

JS

// Describe the form component
// Note: props is an array of attribute your component can take in entry.
// Note: With props you can pass static data('title') or dynamic data('userName').
// Note: When modifying 'name' property, you won't modify the parent variable, it is only descendent.
// Note: On a component, 'data' has to be a function that returns the data.
var formComponent = {
  template: '#form-template',
  props: ['title', 'name'],
  data: function() {
    return {
      inputLabel: 'Name'
    }
  }
};

// This vue has a private component, it is only available on its scope.
// Note: It would work the same if the vue was a component.
// Note: You can build a tree of components, but you have to start the root with a 'new Vue()'.
var vue = new Vue({
  el: '#app',
  data: {
    appName: 'Component Demo',
    userName: 'John Doe'
  },
  components: {
    'form-component': formComponent
  }
});

Quels sont les composants et comment définir les composants?

Les composants dans Vue sont comme des widgets. Ils nous permettent d'écrire des éléments personnalisés réutilisables avec le comportement souhaité.

Ce ne sont que des objets pouvant contenir toutes les options que la racine ou toute instance de Vue peut contenir, y compris un modèle HTML à rendre.

Les composants comprennent:

• Balisage HTML: le modèle du composant
• Styles CSS: comment le balisage HTML sera affiché
• Code JavaScript: les données et le comportement

Celles-ci peuvent être écrites dans un fichier séparé ou dans un fichier unique avec l'extension .vue . Vous trouverez ci-dessous des exemples montrant les deux manières:

.VUE - en tant que fichier unique pour le composant

<style>  
    .hello-world-compoment{  
        color:#eeeeee;  
        background-color:#555555; 
    }  
</style>  

<template>
    <div class="hello-world-component">
        <p>{{message}}</p>
        <input @keyup.enter="changeName($event)"/>
    </div>
</template>

<script>
    export default{            
        props:[ /* to pass any data from the parent here... */ ],   
        events:{ /* event listeners go here */},
        ready(){
            this.name= "John";
        },
        data(){
           return{
              name:''
           }
        },
        computed:{
            message(){
                return "Hello from " + this.name;
            }
        },
        methods:{
            // this could be easily achieved by using v-model on the <input> field, but just to show a method doing it this way.
            changeName(e){
                this.name = e.target.value;
            }
        }  
    }
</script>  

Fichiers séparés

hello-world.js - le fichier JS pour l'objet composant

export default{
    template:require('./hello-world.template.html'),
    props:[ /* to pass any data from the parent here... */ ],  
    events:{ /* event listeners go here */ },
    ready(){
        this.name="John";
    },
    data(){
        return{
            name:''
        }
    },
    computed:{
        message(){
            return "Hello World! from " + this.name;
        }
    },
    methods:{
        changeName(e){
            let name = e.target.value;
            this.name = name;
        }
    }
}  

hello-world.template.html

<div class="hello-world-component">
    <p>{{message}}</p>
    <input class="form-control input-sm" @keyup.enter="changeName($event)">
</div>  

bonjour-world.css

 .hello-world-compoment{  
    color:#eeeeee;  
    background-color:#555555; 
}    

Ces exemples utilisent la syntaxe es2015, de sorte que Babel sera nécessaire pour les compiler en es5 pour les anciens navigateurs.
Babel avec Browserify + vueify ou Webpack + vue-loader sera nécessaire pour compiler hello-world.vue .

Maintenant que nous avons le composant hello-world défini, nous devrions l'enregistrer avec Vue.

Ceci peut être fait de deux façons:

S'inscrire en tant que composant global
Dans le fichier main.js (point d’entrée de l’application), nous pouvons enregistrer tous les composants globalement avec Vue.component :

import Vue from 'vue'; // Note that 'vue' in this case is a Node module installed with 'npm install Vue'
Vue.component('hello-world', require('./hello-world');  // global registeration

new Vue({
    el:'body',

    // Templates can be defined as inline strings, like so:
    template:'<div class="app-container"><hello-world></hello-world></div>'
});  

Ou l'enregistrer localement dans un composant parent ou un composant racine

import Vue from 'vue'; // Note that 'vue' in this case is a Node module installed with 'npm install Vue'
import HelloWorld from './hello-world.js';  

new Vue({
    el:'body',
    template:'<div class="app-container"><hello-world></hello-world></div>",

    components:{HelloWorld}  // local registeration
});  

Les composants globaux peuvent être utilisés n'importe où dans l'application Vue.

Les composants locaux ne sont disponibles que pour utilisation dans le composant parent avec lequel ils sont enregistrés.

Composant de fragment
Vous pouvez obtenir une erreur de console vous indiquant que vous ne pouvez pas faire quelque chose car votre composant est un fragment . Pour résoudre ce type de problème, placez simplement votre template de composant dans une balise unique, comme un <div> .

Enregistrement local des composants

Un composant peut être enregistré globalement ou localement (lié à un autre composant spécifique).

var Child = Vue.extend({
    // ...
})

var Parent = Vue.extend({
    template: '...',
    components: {
         'my-component': Child
    }
})

Le nouveau composant () ne sera disponible que dans la portée (modèle) du composant Parent.

Inscription en ligne

Vous pouvez étendre et enregistrer un composant en une seule étape:

Vue.component('custom-component', {
    template: '<div>A custom component!</div>'
})

Aussi lorsque le composant est enregistré localement:

var Parent = Vue.extend({
    components: {
        'custom-component': {
            template: '<div>A custom component!</div>'
        }
    }
})

Enregistrement de données dans des composants

Si vous transmettez un objet à la propriété data lors de l'enregistrement d'un composant, toutes les instances du composant pointeraient sur les mêmes données. Pour résoudre ce problème, nous devons renvoyer des data d'une fonction.

var CustomComponent = Vue.extend({
    data: function () {
        return { a: 1 }
    }
})

Événements

Un des moyens par lesquels les composants peuvent communiquer avec leurs ancêtres / descendants est via des événements de communication personnalisés. Toutes les instances de Vue sont également des émetteurs et implémentent une interface d'événement personnalisée qui facilite la communication dans une arborescence de composants. Nous pouvons utiliser les éléments suivants:

• $on : écoute les événements émis par ses ancêtres ou descendants.
• $broadcast : $broadcast un événement qui se propage vers le bas à tous les descendants.
• $dispatch : émet un événement qui se déclenche d'abord sur le composant lui-même et qui se propage vers le haut à tous les ancêtres.
• $emit : déclenche un événement sur lui-même.

Par exemple, nous voulons masquer un composant de bouton spécifique dans un composant de formulaire lorsque le formulaire est soumis. Sur l'élément parent:

var FormComponent = Vue.extend({
  // ...
  components: {
    ButtonComponent
  },
  methods: {
    onSubmit () {
        this.$broadcast('submit-form')
    }
  }
})

Sur l'élément enfant:

var FormComponent = Vue.extend({
  // ...
  events: {
    'submit-form': function () {
        console.log('I should be hiding');
    }
  }
})

Quelques points à garder en tête:

• Chaque fois qu'un événement trouve un composant qui l'écoute et qui est déclenché, il cesse de se propager à moins que le rappel de la fonction dans ce composant ne retourne true .
• $dispatch() déclenche toujours d'abord sur le composant qui l'a émis.
• Nous pouvons transmettre n'importe quel nombre d'arguments au gestionnaire d'événements. Faire this.$broadcast('submit-form', this.formData, this.formStatus) nous permet d'accéder à ces arguments comme 'submit-form': function (formData, formStatus) {}