VueJS Components

És itt a vége. Eddig is szuper dolgokat mutattam neked a Vue.js konyhájából, most pedig jön mindennek a megkoronázása, a Component. Mi ez?
Alább elmondom.

Videós magyarázat

Forráskód a Github -on:

Github repo

Component

Egy új HTML elemre kell gondolni. Csak nem <H1> vagy <div>, hanem mondjuk <my-form-element>.
Tehát egyedi néven fut és te írod le hogy hogyan nézzen ki és hogyan működjön.

Így hozod létre:

Vue.component('item', {
    props: ['product'],
    template: `<li :class="{strikeout: product.purchased}" 
        @click="togglePurchased(product)">
            {{ product.label }}
    </li>`,
    methods: {
        togglePurchased: (item) => {
        item.purchased = !item.purchased;
        }
    }
});

Egy kis magyarázat:

  • item: ez lett az elem neve, de lehetne mondjuk cherry-custom-element is
  • props: itt adod meg, hogy milyen egyéni attribútumokat lehet neki átadni
  • template: ez az elem HTML forráskódja, ez megy a DOM -ba
  • methods: az elem egyedi metódusai

Így használod a HTML részben: 

<ul>
    <item v-for="item in sortedItems" :product="item"></item>
</ul>

Látod a megadott néven használom és átadom neki az attribútumot is amit vár. Az már csak hab a tortán, hogy rögtön egy v-for -al ismétlem is és annyiszor jelenik meg, ahány eleme van a sortedItems tömbnek.

Folytatása következzen?

Vue.js Computed