Vue.js
Komponenten

Bemerkungen

Komponentenbereich (nicht 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
  }
});

Was sind Komponenten und wie definiere ich Komponenten?

Komponenten in Vue sind wie Widgets. Sie erlauben uns, wiederverwendbare benutzerdefinierte Elemente mit dem gewünschten Verhalten zu schreiben.

Sie sind nichts anderes als Objekte, die alle Optionen enthalten können, die der Stamm oder eine Vue-Instanz enthalten kann, einschließlich einer zu rendernden HTML-Vorlage.

Komponenten bestehen aus:

• HTML-Markup: Die Vorlage der Komponente
• CSS-Stile: wie das HTML-Markup angezeigt wird
• JavaScript-Code: die Daten und das Verhalten

Diese können jeweils in eine separate Datei oder als einzelne Datei mit der Erweiterung .vue . Im Folgenden sind Beispiele aufgeführt, die beide Möglichkeiten zeigen:

.VUE - als einzelne Datei für die Komponente

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

Dateien trennen

hello-world.js - die JS-Datei für das Komponentenobjekt

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

hallo-world.template.html

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

hallo-world.css

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

In diesen Beispielen wird die Es2015-Syntax verwendet. Daher wird Babel benötigt, um sie für ältere Browser nach es5 zu kompilieren.
Babel wird zusammen mit Browserify + vueify oder Webpack + vue-loader benötigt, um hello-world.vue zu kompilieren.

Nachdem wir nun die hello-world Komponente definiert haben, sollten wir sie bei Vue registrieren.

Dies kann auf zwei Arten erfolgen:

Registrieren Sie sich als globale Komponente
In der Datei main.js (Einstiegspunkt zur App) können wir jede Komponente global mit 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>'
});  

Oder registrieren Sie es lokal in einer übergeordneten Komponente oder Stammkomponente

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 Komponenten können überall in der Vue-Anwendung verwendet werden.

Lokale Komponenten sind nur für die Verwendung in der übergeordneten Komponente verfügbar, mit der sie registriert sind.

Fragmentkomponente
Möglicherweise erhalten Sie einen Konsolenfehler, der Ihnen mitteilt, dass Sie nichts tun können, da Ihre Komponente eine Fragmentkomponente ist . Um dieses Problem zu lösen, wickeln Sie Ihre Komponentenvorlage einfach in ein einzelnes Tag ein, beispielsweise ein <div> .

Lokale Registrierung von Komponenten

Eine Komponente kann entweder global oder lokal registriert werden (Bindung an eine andere bestimmte Komponente).

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

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

Diese neue Komponente () ist nur innerhalb des Gültigkeitsbereichs (der Vorlage) der übergeordneten Komponente verfügbar.

Inline-Registrierung

Sie können eine Komponente in einem Schritt erweitern und registrieren:

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

Auch wenn die Komponente lokal registriert ist:

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

Datenregistrierung in Komponenten

Wenn Sie beim Registrieren einer Komponente ein Objekt an die data -Eigenschaft übergeben, würden alle Instanzen der Komponente auf dieselben Daten zeigen. Um dies zu lösen, müssen wir data von einer Funktion zurückgeben.

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

Veranstaltungen

Eine Möglichkeit, wie Komponenten mit ihren Vorfahren / Nachkommen kommunizieren können, ist über benutzerdefinierte Kommunikationsereignisse. Alle Vue-Instanzen sind auch Emitter und implementieren eine benutzerdefinierte Ereignisschnittstelle, die die Kommunikation innerhalb eines Komponentenbaums erleichtert. Wir können Folgendes verwenden:

• $on : Hören Sie sich Ereignisse an, die von Vorfahren oder Nachkommen dieser Komponente ausgegeben werden.
• $broadcast : Gibt ein Ereignis aus, das sich nach unten an alle Nachkommen ausbreitet.
• $dispatch : Gibt ein Ereignis aus, das zuerst auf der Komponente selbst ausgelöst wird und sich dann an alle Vorfahren weiterleitet.
• $emit : Löst ein Ereignis für sich aus.

Beispielsweise möchten wir eine bestimmte Schaltflächenkomponente in einer Formularkomponente ausblenden, wenn das Formular übermittelt wird. Auf dem übergeordneten Element:

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

Auf dem untergeordneten Element:

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

Einige Dinge zu beachten:

• Wenn ein Ereignis eine Komponente findet, die es abhört und ausgelöst wird, wird es nicht weiter verbreitet, es sei denn, der Funktionsrückruf in dieser Komponente gibt true .
• $dispatch() immer zuerst bei der Komponente ausgelöst, die sie ausgegeben hat.
• Wir können beliebig viele Argumente an den Ereignishandler übergeben. this.$broadcast('submit-form', this.formData, this.formStatus) erlaubt uns den Zugriff auf diese Argumente wie 'submit-form': function (formData, formStatus) {}