Komponensek 25.02.05

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 a már meglévő objektumunkat bővíteni a components nevű tulajdonsággal. Ebbe fogjuk felvenni az importált komponensünket és ezáltal fog elérhetővé válni a template számára.

<template>
  <BaseComponent />
</template>

<script>
import BaseComponent from "@components/BaseComponent.vue"

export default{
  components: {
    BaseComponent
  }
}
</script>

Átadott tulajdonságok

Az adott komponensünkben tudjuk definiálni, hogy milyen tulajdonságokat szeretnénk átvenni a szülőtől.

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

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.

Az email és a connections esetében egy objektummal adunk 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 vagy direktívát.

<template>
  <BaseComponent
    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ás:

<template>
  <BaseComponent
    class="card text-white bg-dark"
  />
</template>

<template>
  <div class="text-white bg-dark">
    ...
  </div>
</template>

Ezt felül tudjuk írni, amihez arra van szükségünk, hogy a komponensben az Options API objektumá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 attribú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 és ezzel együtt akár adatot is. Ezt úgy tudjuk megtenni, hogy a megfelelő eseményt helyileg kezeljük, úgy hogy az $emit() függvényt hívjük meg csak, amelynek az első paramétere az esemény neve, amit kiváltunk, é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 kiváltott eseményt.

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

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

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

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

É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 pirossal jelzett néven tudjuk megtenni függvényként felvéve az objektumunkban. Példa egy csatolás után lefutó műveletre:

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

Globális komponensek

A main.js-ben fel tudjuk venni az alkalmazás példá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 az importált komponens.

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é elhelyezett kód átadásra kerül, a Vue le fogja cserélni a <slot />-ot a megfelelő tartalomra.

\pagebreak