Komponensek #

A következőkben azt fogjuk áttekinteni, hogy hogyan lehet komponensekre bontani és azokat egymásba építve felhasználni az alkalmazásunkban.

Komponens importálása és felhasználása #

Elsőként importálni kell a megfelelő .vue fájlt, ezek után szükséges lesz az obejektumunkat bővíteni a components nevű objectel. Ebbe fogjuk felvenni az importált komponensünket és ezáltal fog elérhetővé válni a template számára.

import SubComponent from "./components/SubComponent.vue"

export default{
  components: {
    SubComponent
  }
}

Ennek felhasználása a template-ben a következőképpen fog történni:

<template>
  <SubComponent />
</template>

Vagy...

<template>
  <sub-component />
</template>

Átadott tulajdonságok #

Az adott komponentünkben tudjuk definiálni, hogy milyen tulajdonságokat tudunk átvenni a szülőtől.

A props: obejct segítségével tudjuk megadni a komponensünk számára, úgy, hogy a kulcsunk a tuladonság neve lesz, míg az érték többféleképp is összeállhat. Nézzük a példát-

export default{
  props: {
    name: String,
    birthDate: [String,DateTime],
    email: {
      type: String,
      required: true
    },
    connections:{
      type: Number,
      default: 0
    }
  }
}

Az első esetben (name: String) csak a típust vagy a megfelelő osztályt adjuk meg a tulajdonságunk számára.

A második esetben (birthDate: [String,DateTime]) a tömb azért szükséges, hogy több féle típust is elfogadunk, így a születési dátum esetén, ha fentről DateTime-os vagy Stringet kapunk, akkor mindettő helyes lesz.

A harmadik és negyedik esetben egy objektummal adhatunk meg több információt a tulajdonságról. Például, hogy kötelező-e, vagy hogy milyen alapértelmezett értéket kapjon.

A template-ben úgy fogjuk tudni átadni ezeket mint bármely más HTML attribútumot.

<template>
  <sub-component
    name="Papp Zsombor"
    :birthDate="new Date('2003-09-01')"
    email="papp.zsombor@example.com"
    :connections="item.connections"
  />
</template>

Attribútumok automatikus átadása #

Abban az esetben, hogyha egy HTML attribútumot adunk meg a komponens számára, akkor az automatikusan át fog adódni, az első szinten található legelső elemnek.

Tehát a következő esetben így fog kinézni az átadódás:

<!-- App.vue -->
<template>
  <sub-component
    class="card text-white bg-dark"
  />
</template>

<!-- SubComponent.vue futásidőben-->
<template>
  <div class="card text-white bg-dark">
    ...
  </div>
</template>

Ezt felül tudjuk írni, amihez arra van szükségünk, hogy a komponensben az Options API obejktumához hozzáírjuk a következőt: inheritAttrs: false. A template-ben pedig a megfelelő elemre rá tudjuk tenni a v-bind="$attrs" direktívát. Ilyenkor az adott elemre fogja ezeket az attrivútumokat átadni a Vue.

Eseménykezelés #

Lehetőségünk van arra, hogy a komponensünkben az eseményeket fel tudjuk adni a szülő számára. Ezt úgy tudjuk megtenni, hogy a megfelelő eseményt helyileg kezeljük, úgy hogy es speciális függvényt hívunk meg rajta. Ez pedig az $emit() lesz, amelynek az első paramétere az esemény neve, amelyiket felküldjük, és ezután tetszőleges számí paramétert megadhatunk, amit az eseménykezelő függvénynek adunk oda. Ezen kívül az objektumban fel kell vennünk az emits nevű tömböt, amelyben felvesszük a az összes felküldött eseményt.

CounterButton.vue:

<template>
  <button @click="$emit('incrementClick',1)">A számláló: {{count}}</button>
<template>

export default{
  props:{
    count:{
      type: Number,
      default: 0
    }
  },
  emits: ['incrementClick']
}

App.vue:

<template>
  <counter-button @increment-click="inc" :count="count"/>
<template>

export default{
  data(){
    return{
      count: 0
    }
  },
  methods:{
    inc(n){
      this.count += n;
    }
  }
}

Életciklus #

A Vue lehetőséget ad arra, hogy a különböző komponenseink futtassanak függvényeket, akkor, ha az különböző életciklusbeli állapotot elérnek az alkalmazásban. Ezeket a fenti ábrán prossal jelzett néven tudjuk megtenni függvényként felvéve az obejktumunkban. Példa egy csatolás után lefutó műveletre:

export default{
  methods:{
    async fetchData(){
      ...
    }
  },
  mounted(){
    this.fetchData();
  }
}

Globális komponensek #

A main.js-ben fel tudjuk venni az alkalmazás plédányon keresztül a komponenseket úgy, hogy azt bárhol felhasználhassuk az alkalmazásunkban.

Ezt a Global API .component függvényével tudjuk megtenni, ahol az első paraméter a komponens felhasználandó neve lesz, míg a második a komponens objektuma importálva.

import MyComponent from './App.vue'

app.component('MyComponent', MyComponent)

Slotok #

A keretrendszer biztosít nekünk egy olyan szerkezetet is amellyel fentől be tudunk ágyazni elemeket a komponensünkbe. Az ilyen bővítőhelyet a <slot /> segítségével tudjuk elhelyezni.

Ekkor páros tag-ként kell mindenképp használni a komponensünket és a páros tag közé kerülő rész átadásra kerül, a Vue le fogja cserélni a <slot />-ot a megfelelő tartalomra.

Ellenőrző kérdések #

1. Milyen típusok adhatóak meg az átadott tulajdonságoknak?
2. Mire való az emits: [...]?
3. Válassz 3 életciklus függvényt, melyik mikor fut le?
4. Miért érdemes komonensekre bontani az alkalmazást?
5. Hogyan lehet globális komponenst regisztrálni?

\pagebreak