Vue Props&Custom Event Kullanımı

Bu yazıda Vue3 framework’ünde propsların ve custom eventlerin kullanım amacını ve nasıl kullanıldığını görseller ve kodlar yardımıyla anlatacağım.

Props

Propslar parent componentten child’a veri gönderirken kullandığımız yapılardır. Örneğin parentta bir dizi tanımladınız ve bu dizi child component içerisinde bir for döngüsünde kullanılacak bunu diziyi props yardımıyla child’a aktararak sağlayabiliriz.

Bu kod örneğinde ProductList, “Parent Component” . Template içerisinde child olan product componenti import edilmiş ve kullanılıyor, productList child’a göndermek istediğimiz data. “:product” kısmı ise child componentinde çağıracağımız isim oluyor

<template>
    <div>
        <Product :product="productList"/>
    </div>
</template>
<script>
import Product from './Product.vue';
export default({
    components:{
        Product
    },
    data() {
      return {
        productList:[
            {name:'Pencil',stock:10,price:2},
            {name:'Notebook',stock:15,price:5},
            {name:'Book',stock:20,price:6}
        ]
      }
        
    }
})
</script>

Product.vue dosyası ise şu şekilde

<template>
  <div class="products-container">
    <ul>
      <li v-for="(productItem, index) in product" :key="index">
        <div class="product">
          <p>Product Name: {{ productItem.name }}</p>
          <p>Product Stock: {{ productItem.stock }}</p>
          <p>Product Price: {{ productItem.price }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  props: ["product"]
};
</script>
<style>
.products-container {
  display: flex;
  justify-content: center;
}
.product {
  display: flex;
  justify-content: space-around;
}
</style>

Böylelikle data bir componentte tanımlandı ve farklı componentlerde kullanılmış oldu. Veriyi duplicate etmeden bu şekilde kullanabiliriz.

Custom Events

Child componentinden parenta bir data göndermemiz gerekirse bunu custom event kullanarak gerçekleştirebiliriz.

Bu kısımda şöyle düşünelim bir sitemiz var ve ürünler satıyoruz. Ürünlerin fotoğrafı, stok durumu fiyatı ve satın alma butonu bir componentte fakat sepetinizdeki ürünlerin sayısını görüntüleyeceğiz kısım farklı bir componentte yazılmış. Peki nasıl olacak da başka bir componentte yaptığım ekleme işlemi görünecek? Cevabını kodlar üzerinde inceleyelim

<template>
  <div>
    <div>
      <img src="@/assets/kedii.jpeg" style="width: 50%; height: 100%" />
      <p>Cats</p>
    </div>

    <div>
      <button @click="addCat">Ekle</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return { catCount: 0 };
  },
  methods: {
    addCat() {
      this.$emit("addCats");
    },
  },
};
</script>

Burada butona click olduğumuzda tetikleyeceğimiz methodun içerisine bir emit yazdık ve “addCats” diyerek bunu parentta kullanacağımız ismini belirttik.

<template>
 <ChildComponent @addCats="addCats"></ChildComponent> 
  <div>
    Sepet: {{ countOfItem }}
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default(
{
    data() {
        return {
            countOfItem:0
        }
    },
    components: {
        ChildComponent
    },
    methods: {
       addCats() {
        this.countOfItem += 1
       }
    }

})
</script>
<style>
.clickedStyle{
    color:pink;
    background-color: aqua;
}
</style>

Parent componentinde bir data tanımladık bu kullanıcının butona tıkladıkça göreceği o rakam oluyor.

Props ve Custom Eventlerin kullanımı en basit haliyle bu şekilde. İhtiyacımız doğrultusunda farklı yapılar tercih edebiliriz.