Vue.js
Komponenter

Anmärkningar

Komponent scoped (inte global)

demo

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

Vad är komponenter och hur definierar jag komponenter?

Komponenter i Vue är som widgets. De tillåter oss att skriva återanvändbara anpassade element med önskat beteende.

De är inget annat än objekt som kan innehålla något av alla alternativ som roten eller någon Vue-instans kan innehålla, inklusive en HTML-mall som ska visas.

Komponenter består av:

• HTML-markering: komponentens mall
• CSS-stilar: hur HTML-markeringen visas
• JavaScript-kod: data och beteende

Dessa kan var och en skrivas i en separat fil eller som en enda fil med .vue förlängningen. Nedan följer exempel som visar båda sätten:

.VUE - som en enda fil för komponenten

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

Separata filer

hello-world.js - JS-filen för komponentobjektet

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

Dessa exempel använder es2015-syntax, så Babel kommer att behövas för att sammanställa dem till es5 för äldre webbläsare.
Babel tillsammans med Browserify + vueify eller Webpack + vue-loader kommer att krävas för att sammanställa hello-world.vue .

Nu när vi har definierat hello-world bör vi registrera den hos Vue.

Detta kan göras på två sätt:

Registrera dig som en global komponent
I main.js filen (posten till appen) kan vi registrera alla komponenter globalt med 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>'
});  

Eller registrera det lokalt i en överordnad komponent eller rotkomponent

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

Globala komponenter kan användas var som helst inom Vue-applikationen.

Lokala komponenter är endast tillgängliga för användning i den överordnade komponenten som de är registrerade med.

Fragmentkomponent
Du kan få ett konsolfel som säger att du inte kan göra något eftersom ditt är en fragmentkomponent . För att lösa den här typen av problem, packa bara in din komponentmall i en enda tagg, som en <div> .

Lokal registrering av komponenter

En komponent kan registreras antingen globalt eller lokalt (binda till en annan specifik komponent).

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

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

Den nya komponenten () kommer endast att finnas inom ramen (mallen) för överföringskomponenten.

Inline registrering

Du kan utöka och registrera en komponent i ett steg:

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

Även när komponenten är registrerad lokalt:

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

Dataregistrering i komponenter

Passerar ett objekt till data egendom när registrering av en komponent skulle orsaka alla förekomster av den komponent som pekar på samma data. För att lösa detta måste vi returnera data från en funktion.

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

evenemang

Ett av de sätt komponenterna kan kommunicera med sina förfäder / ättlingar är via anpassade kommunikationshändelser. Alla Vue-instanser är också sändare och implementerar ett anpassat händelsesgränssnitt som underlättar kommunikation i ett komponentträd. Vi kan använda följande:

• $on : Lyssna på händelser som släppts ut av denna komponent förfäder eller ättlingar.
• $broadcast : avger en händelse som sprider sig nedåt till alla ättlingar.
• $dispatch : Avger en händelse som utlöses först på själva komponenten och än sprider sig uppåt till alla förfäder.
• $emit : Utlöser en händelse på mig själv.

Vi vill till exempel dölja en specifik knappkomponent i en formulärkomponent när formuläret skickas in. På överordnade elementet:

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

På barnelementet:

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

Några saker att tänka på:

• Närhelst en händelse hittar en komponent som lyssnar på den och aktiveras kommer den att sluta sprida sig om inte funktionen återuppringning i den här komponenten returnerar true .
• $dispatch() utlöser alltid först på den komponent som har utsänt den.
• Vi kan överföra valfritt antal argument till händelseshanteraren. Genom att göra this.$broadcast('submit-form', this.formData, this.formStatus) tillåter oss åtkomst till dessa argument som 'submit-form': function (formData, formStatus) {}