Transfer Data Props ke Child Component dengan Click Event Vue

wahyunanangwidodo

wahyunanangwidodo Sabtu, 09 Januari 2021

Transfer Data Props ke Child Component dengan Click Event Vue

Ketika kita memiliki data pada komponen parent dan ingin mentransfer atau meneruskan data nya ke komponen anak, salah satu cara yang bisa kita lakukan adalah melalui props.

Meneruskan data dari parent ini bisa kita lakukan dengan langsung mendefinisikan props ke komponen atau dengan membuat kondisi, transfer data berdasarkan event tertentu seperti click.

Sebagai contoh, kita akan coba meneruskan data yang ada di komponen parent atau induk ke komponen anak dengan klik pada button untuk diteruskan seperti dibawah ini.

Misalnya kita telah merender data array dengan v-for directive pada komponen induk / parent.

<tr v-for="post in posts" :key="post.id">
  <td>
    {{post.title}} 
  </td>
  <td>  
    <button class="btn btn-primary" v-on:click="addParentId(post.id)">
    Submit
    </button>   
  </td>
</tr>

Pada button dengan v-on directive yang kita tambahakan method, kita berikan statement dengan data kita seperti diatas.

Lalu kita buat method dan data properti seperti dibawah ini.

//parent
<template>
  <div>
    <tr v-for="category in categories" :key="category.id">
      <td>
        {{category.name}} 
      </td>
      <td>  
        <button class="btn btn-primary" @click="addParentId(category.id)">
        Tambah Sub Kategori
        </button>   
      </td>
    </tr>
    
    <child-component :parentId="parentId"></child-component>
    
  </div>
</template>
<script>   
  import ChildComponent from './ChildComponent' 
  
  export default {
    components: { 
      ChildComponent,  
    },
    data(){
      return { 
        parentId: '',  
      }
    }, 
    methods: { 
      addParentId(id){
        this.parentId = id;
      }
    }
  }
</script>

Jadi setelah kita buat tindakan atau klik pada button, data kita teruskan ke properti parentId kemudian kita masukan sebagai props pada komponen anak yang telah kita import dan didefinisikan seperti diatas.

Selanjutnya di komponen anak nya sendiri kita panggil props dan dapat langsung dirender.

<template> 
  <div> 
      {{parentId}}
  </div> 
</template>

<script>
export default {
  props: ['parentId']
}
</script>

Lihat Juga: Fungsi $emit di Vue.js

Atau bisa juga kita memasukan data props ke data properi sebagai value seperti dibawah ini.

<template> 
  <div> 
      {{parentId}}
  </div> 
</template>

<script>
  export default {
    props: ['parentId'], 
    data(){
      return {
        category: { 
          parent_id: this.parentId
        }
      }
    },
     methods: {
      //
    }
  }
</script>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Berlangganan

Berlangganan untuk mendapat pemberitahuan artikel terbaru via email.