Komponenttien käyttäminen

Käytettävät komponentit lisätään components -objektiin. Komponentin tägin nimi on sama kuin millä se lisättiin componentsiin.

<template>
    <main-menu></main-menu>
</template>
<script>
    import Menu from './menu.vue'
    export default {
        components: {
            'main-menu': Menu // nyt komponentin tägi on main-menu
        }
    }
</script>

Datan välittäminen komponenttiin

Komponentit voivat määritellä props -objektissa mitä arvoja ne ottavat vastaan

export default {
    name: 'slider',
    props: ['min', 'max', 'step']
}

Niille voi myös antaa asetuksia tyypistä, pakollisuudesta, oletusarvosta ja validoinnista.

export default {
    name: 'slider',
    props: {
        min: {
            type: Number,
            default: 0
        },
        max: {
            type: Number,
            required: true
        },
        step: {
            validator(value) {
                return value > 0 && value < 10;
            }
        }
    }
}

Arvot välitetään samannimisinä attribuutteina (: nimen eteen, jos arvo evaluoidaan)

<slider :min="sliderMin" :max="sliderMax" step="1" />

Datan välittäminen komponentista

Komponentit voivat nostaa eventejä kutsumalla $emit -metodia. Se ottaa parametrina ensin eventin nimen ja sen perässä 0..n argumenttia.

export default {
    name: 'contact-form',
    //...
    methods: {
        save(){
            var details = { /* ... */};
            this.$emit('save', details);
        }
    }
}

Komponenttia käyttävä pää voi kuunnella näitä kuten muitakin eventejä (@-merkki nimen eteen)

<contact-form @save="saveForm" />

export default {
    //...
    methods: {
        saveForm(formData){
            // ...
        }
    }
}

Komponentin käsittely skriptissä

Komponentille voi antaa templatessa ref -attribuutin

<contact-form ref="contactForm" />

jolloin sen tietoihin pääsee käsiksi $refs -kentän kautta

export default {
    //...
    methods: {
        saveForm(){
            var form = this.$refs.contactForm;
            var details = { form.email /* ... */};
        }
    }
}

Sisältöalueet

Komponentille voi antaa myös sisältöä

<my-component>
    <div>...</div>
</my-component>

Jotta sisältö menisi oikeaan kohtaan, voi komponentissa määritellä alueita (slot). Slot ilman nimeä on oletusalue. Esimerkiksi sivupohja, jossa on paikat valikolle sekä pääsisällölle (oletus).

<!-- layout.vue -->
<div>
    <slot name="menu"></slot>
    <slot></slot>
</div>

Nyt elementit, joilla on slot -attribuutti annettu menevät vastaavaan slotiin komponentissa. Kaikki muu menee oletusslotiin.

<layout>
    <main-menu slot="menu" />
    <div>content</div>
</layout>

Dynaaminen komponentin valinta

Jos komponentin tyyppi vaihtelee eri tilanteissa, voi sen toteuttaa is -attribuutilla

<component :is="componentName" :data="componentData"></component>

Ja näin em. korvataan oikean nimisellä komponentilla.

Komponentin sisäisiä tietoja

• $attrs komponentille annetut attribuutit
• $children viittaukset lapsikomponentteihin
• $data komponentin data-objekti
• $el komponentin juurielementti
• $parent viittaus ylemmän tason komponenttiin
• $props komponentin props arvot
• $root viittaus juurikomponenttiin (Vue -instanssi)
• $slots sisältöalueet

Vaikka datan keskittäminen korkean tason komponentille ja lukeminen $parent- tai $root -kenttien kautta onnistuu, se ei ole hyvä ratkaisu komponenttien uudelleenkäytettävyyttä ajatellen. Keskitettyyn tilanhallintaan on kirjasto vuex.