Vue.js
składniki

Uwagi

Zakres komponentu (nie globalny)

Próbny

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

Co to są komponenty i jak je definiować?

Komponenty w Vue są jak widżety. Pozwalają nam pisać niestandardowe elementy wielokrotnego użytku o pożądanym zachowaniu.

Są niczym innym jak obiektami, które mogą zawierać dowolne / wszystkie opcje, które może zawierać root lub dowolna instancja Vue, w tym szablon HTML do renderowania.

Składniki składają się z:

• Znaczniki HTML: szablon komponentu
• Style CSS: sposób wyświetlania znaczników HTML
• Kod JavaScript: dane i zachowanie

Każdy z nich może być zapisany w osobnym pliku lub jako pojedynczy plik z rozszerzeniem .vue . Poniżej znajdują się przykłady pokazujące obie drogi:

.VUE - jako pojedynczy plik dla komponentu

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

Oddzielne pliki

hello-world.js - plik JS dla obiektu komponentu

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

Te przykłady używają składni es2015, więc Babel będzie musiał skompilować je do es5 dla starszych przeglądarek.
Babel wraz z Browserify + vueify lub Webpack + vue-loader będą wymagane do skompilowania hello-world.vue .

Teraz, gdy mamy zdefiniowany komponent hello-world , powinniśmy zarejestrować go w Vue.

Można to zrobić na dwa sposoby:

Zarejestruj się jako komponent globalny
W pliku main.js (punkt wejścia do aplikacji) możemy zarejestrować dowolny komponent globalnie w 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>'
});  

Lub zarejestruj go lokalnie w komponencie nadrzędnym lub głównym

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

Globalnych składników można używać w dowolnym miejscu aplikacji Vue.

Komponenty lokalne są dostępne tylko do użytku w komponencie nadrzędnym, z którym są zarejestrowane.

Składnik fragmentu
Może pojawić się błąd konsoli informujący, że nie możesz nic zrobić, ponieważ twój jest fragmentaryczny . Aby rozwiązać ten problem, po prostu umieść szablon komponentu w jednym znaczniku, takim jak <div> .

Lokalna rejestracja komponentów

Składnik można zarejestrować globalnie lub lokalnie (powiązanie z innym określonym składnikiem).

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

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

Nowy komponent () będzie dostępny tylko w zakresie (szablonie) komponentu nadrzędnego.

Rejestracja bezpośrednia

Możesz rozszerzyć i zarejestrować komponent w jednym kroku:

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

Również gdy komponent jest zarejestrowany lokalnie:

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

Rejestracja danych w komponentach

Przekazanie obiektu do właściwości data podczas rejestracji komponentu spowodowałoby, że wszystkie instancje komponentu wskazywałyby na te same dane. Aby rozwiązać ten problem, musimy zwrócić data z funkcji.

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

Wydarzenia

Jednym ze sposobów komunikacji komponentów z przodkami / potomkami są niestandardowe zdarzenia komunikacyjne. Wszystkie instancje Vue są również emiterami i implementują niestandardowy interfejs zdarzeń, który ułatwia komunikację w drzewie komponentów. Możemy użyć następujących:

• $on : Słuchaj zdarzeń emitowanych przez te elementy przodków lub potomków.
• $broadcast : $broadcast zdarzenie, które rozprzestrzenia się w dół do wszystkich potomków.
• $dispatch : emituje zdarzenie, które wyzwala się najpierw na samym komponencie, a następnie propaguje w górę do wszystkich przodków.
• $emit : wyzwala zdarzenie samodzielnie.

Na przykład chcemy ukryć określony komponent przycisku wewnątrz komponentu formularza podczas przesyłania formularza. W elemencie nadrzędnym:

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

Na elemencie potomnym:

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

Kilka rzeczy, o których należy pamiętać:

• Ilekroć zdarzenie znajdzie komponent, który nasłuchuje i zostanie wyzwolone, przestanie się propagować, chyba że wywołanie zwrotne funkcji w tym komponencie zwróci wartość true .
• $dispatch() zawsze uruchamia się jako pierwszy w komponencie, który go wyemitował.
• Możemy przekazać dowolną liczbę argumentów do modułu obsługi zdarzeń. Wykonanie this.$broadcast('submit-form', this.formData, this.formStatus) pozwala nam uzyskać dostęp do tych argumentów, takich jak 'submit-form': function (formData, formStatus) {}