Vue.js
Components

Opmerkingen

Onderdeelbereik (niet globaal)

demonstratie

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

Wat zijn componenten en hoe componenten te definiëren?

Componenten in Vue zijn als widgets. Ze stellen ons in staat om herbruikbare aangepaste elementen met gewenst gedrag te schrijven.

Het zijn niets anders dan objecten die alle opties kunnen bevatten die de root of een Vue-instantie kan bevatten, inclusief een HTML-sjabloon om weer te geven.

Componenten bestaan uit:

• HTML-opmaak: de sjabloon van de component
• CSS-stijlen: hoe de HTML-opmaak wordt weergegeven
• JavaScript-code: de gegevens en het gedrag

Deze kunnen elk in een afzonderlijk bestand worden geschreven of als een enkel bestand met de extensie .vue . Hieronder staan voorbeelden die beide manieren tonen:

.VUE - als een enkel bestand voor de component

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

Afzonderlijke bestanden

hello-world.js - het JS-bestand voor het componentobject

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>  

hello-world.css

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

Deze voorbeelden gebruiken de syntaxis van es2015, dus Babel is nodig om ze te compileren naar es5 voor oudere browsers.
Babel is samen met Browserify + vueify of Webpack + vue-loader vereist om hello-world.vue te compileren.

Nu we de hello-world hebben gedefinieerd, moeten we deze bij Vue registreren.

Dit kan op twee manieren:

Registreer als een wereldwijd onderdeel
In het main.js bestand (toegangspunt tot de app) kunnen we elk onderdeel wereldwijd registreren met 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>'
});  

Of registreer het lokaal in een bovenliggende component of rootcomponent

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

Globale componenten kunnen overal in de Vue-toepassing worden gebruikt.

Lokale componenten zijn alleen beschikbaar voor gebruik in de bovenliggende component waarmee ze zijn geregistreerd.

Fragmentcomponent
Mogelijk krijgt u een consolefout die aangeeft dat u niets kunt doen, omdat de uwe een fragmentcomponent is . Om dit soort problemen op te lossen, plaats je je deelsjabloon in een enkele tag, zoals een <div> .

Lokale registratie van componenten

Een component kan globaal of lokaal worden geregistreerd (binden aan een andere specifieke component).

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

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

Thiw nieuwe component () zal alleen beschikbaar zijn binnen het bereik (sjabloon) van de bovenliggende component.

Inline registratie

U kunt een component in één stap uitbreiden en registreren:

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

Ook wanneer het onderdeel lokaal is geregistreerd:

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

Gegevensregistratie in componenten

Als u een object doorgeeft aan de eigenschap data bij het registreren van een component, zouden alle instanties van de component naar dezelfde gegevens verwijzen. Om dit op te lossen, moeten we data van een functie retourneren.

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

Evenementen

Een van de manieren waarop componenten kunnen communiceren met zijn voorouders / nakomelingen is via aangepaste communicatie-evenementen. Alle Vue-instanties zijn ook emitters en implementeren een aangepaste gebeurtenisinterface die communicatie binnen een componentboom mogelijk maakt. We kunnen het volgende gebruiken:

• $on : luister naar evenementen uitgezonden door voorouders of afstammelingen van deze componenten.
• $broadcast : er wordt een gebeurtenis $broadcast die zich naar beneden verspreidt naar alle nakomelingen.
• $dispatch : Stuurt een gebeurtenis uit die eerst op de component zelf wordt geactiveerd en zich vervolgens naar alle voorouders voortplant.
• $emit : activeert een evenement op zichzelf.

We willen bijvoorbeeld een specifiek knoponderdeel in een formulieronderdeel verbergen wanneer het formulier wordt verzonden. Over het bovenliggende element:

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

Over het onderliggende element:

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

Enkele dingen om in gedachten te houden:

• Wanneer een gebeurtenis een component vindt die ernaar luistert en wordt geactiveerd, stopt deze met verspreiden tenzij de functie-callback in deze component true terugkeert.
• $dispatch() activeert altijd eerst het onderdeel dat het heeft uitgezonden.
• We kunnen een willekeurig aantal argumenten doorgeven aan de gebeurtenishandler. Als we this.$broadcast('submit-form', this.formData, this.formStatus) geeft ons toegang tot deze argumenten zoals 'submit-form': function (formData, formStatus) {}