Vue.js
componenti

Osservazioni

Ambito del componente (non globale)

dimostrazione

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
  }
});

Quali sono i componenti e come definire i componenti?

I componenti in Vue sono come i widget. Ci permettono di scrivere elementi personalizzati riutilizzabili con il comportamento desiderato.

Non sono altro che oggetti che possono contenere una o tutte le opzioni che la root o qualsiasi istanza di Vue può contenere, incluso un template HTML da renderizzare.

I componenti consistono in:

• Markup HTML: il modello del componente
• Stili CSS: come verrà visualizzato il markup HTML
• Codice JavaScript: i dati e il comportamento

Questi possono essere scritti ciascuno in un file separato o come un singolo file con estensione .vue . Di seguito sono riportati esempi che mostrano entrambi i modi:

.VUE - come singolo file per il componente

<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>  

File separati

hello-world.js - il file JS per l'oggetto componente

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;
        }
    }
}  

ciao-world.template.html

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

ciao-world.css

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

Questi esempi usano la sintassi es2015, quindi Babel sarà necessario per compilarli in es5 per i browser più vecchi.
Babel con Browserify + vueify o Webpack + vue-loader sarà richiesto per compilare hello-world.vue .

Ora che abbiamo definito il componente hello-world , dovremmo registrarlo con Vue.

Questo può essere fatto in due modi:

Registrati come componente globale
Nel file main.js (punto di accesso all'app) possiamo registrare qualsiasi componente a livello globale con 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>'
});  

Oppure registrarlo localmente all'interno di un componente principale o di un componente root

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
});  

I componenti globali possono essere utilizzati ovunque all'interno dell'applicazione Vue.

I componenti locali sono disponibili solo per l'uso nel componente principale con cui sono registrati.

Componente del frammento
Potresti ricevere un errore della console che ti dice che non puoi fare qualcosa perché il tuo è un componente di frammento . Per risolvere questo tipo di problema è sufficiente avvolgere il modello del componente all'interno di un singolo tag, come un <div> .

Registrazione locale dei componenti

Un componente può essere registrato globalmente o localmente (collegarsi a un altro componente specifico).

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

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

Thiw new component () sarà disponibile solo all'interno dell'ambito (template) del componente Parent.

Registrazione in linea

Puoi estendere e registrare un componente in un solo passaggio:

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

Anche quando il componente è registrato localmente:

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

Registrazione dei dati nei componenti

Passare un oggetto alla proprietà dei data durante la registrazione di un componente farebbe sì che tutte le istanze del componente puntino agli stessi dati. Per risolvere questo, abbiamo bisogno di restituire i data da una funzione.

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

eventi

Uno dei modi in cui i componenti possono comunicare con i suoi antenati / discendenti è tramite eventi di comunicazione personalizzati. Tutte le istanze di Vue sono anche emettitori e implementano un'interfaccia evento personalizzata che facilita la comunicazione all'interno di un albero di componenti. Possiamo usare il seguente:

• $on : ascolta gli eventi emessi da questi componenti antenati o discendenti.
• $broadcast : emette un evento che si propaga verso il basso a tutti i discendenti.
• $dispatch : emette un evento che si innesca prima sul componente stesso e che si propaga verso l'alto a tutti gli antenati.
• $emit : attiva un evento su se stesso.

Ad esempio, vogliamo nascondere un componente pulsante specifico all'interno di un componente del modulo quando il modulo viene inviato. Sull'elemento genitore:

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

Sull'elemento figlio:

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

Alcune cose da tenere a mente:

• Ogni volta che un evento trova un componente che lo ascolta e viene attivato, interrompe la propagazione a meno che la funzione callback in questo componente non restituisca true .
• $dispatch() si attiva sempre prima sul componente che lo ha emesso.
• Possiamo passare qualsiasi numero di argomenti al gestore di eventi. Facendo this.$broadcast('submit-form', this.formData, this.formStatus) ci permette di accedere a questi argomenti come 'submit-form': function (formData, formStatus) {}