Tutorial Nuxt Props| Menggunakan Props Komunikasi Parent ke Child Component

Sebagai ikhtiar biar dapat mengikat ilmu agar tidak mudah lupa adalah dengan menulisnya atau mencatat ulang. Saya catat ulang di blog saya ini. Jika kawan kawan mampir ke blog ini semoga blog ini membantu.

Mungkin dalam penulisan ini ada yang tidak sesuai dengan dokumentasi, saya mencoba agar penulisan code ini dapat berjalan.

Props adalah cara untuk mengirim data/komunikasi dari parent ke componen child, sehingga child bisa menerima data dari parent dan meproses nya di child componen. contohnya code di bawah ini, pertama harus menginisiasi componen.

#parent
<template>
<div>   
     <detailbid :userid="userid"/>
</div>
</template>

<script>
import detailbid from '~/components/detailbid.vue'
export default{
  components: { detailbid },
  data() {
    return {
      userid: '101',
    }
  },
}
</script>

#child
<template>
<div>
     <p>{{userid}}</p>
</div>
</template>
<script>
export default {
  name : 'detailbid',
  props: {
    userid: {
      type: String,
    },
  },
}
</script>

Saat menggunakan props kita harus memberikan type data yang di gunakan di child componen.

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

Semoga bermanfaat terimakasih .