Konsep props — Vue js

Pada dasarnya ‘props’ digunakan untuk berbagi data dari parent ke child (komponen).

Anggap saja ada 3 bagian: parent, elemen, dan child.

• Parent adalah penyedia data
• Elemen adalah perantara, dan
• Child yang membutuhkan data.

Parent → Elemen → Child

• Parent

new Vue({
    el: '',
    data: {
        anggur: 'ungu'
    }
})

Pada kode di atas ‘parent’ mempunyai satu data yang bernama ‘anggur’ dengan value ‘ungu’. Ceritanya, ‘anggur’ ini akan dikirim ke child melalui elemen, oke lanjut ke elemen.

• Elemen ( ‘child’ sebagai nama properti, ‘parent’ sebagai value )

<komponen buah="anggur"></komponen>

‘anggur’ pada elemen komponen dimasukkan sebagai value dari properti ‘buah’.

Value dari properti buah ( ‘anggur’ ) adalah data yang akan dikirim ke child. Sedangkan nama properti ( ‘buah’ ) akan dimasukkan sebagai value dari props pada child.

• Child

Vue.component({
    props: [buah],
})

Nama properti ( ‘buah’ ) dimasukkan sebagai value dari props ( dalam bentuk array ).

Pada bagian ini data sudah diterima oleh ‘child’, maka data tersebut sudah siap untuk digunakan.

Vue.component({
    props: [buah],

template: `
        <div>
            {{ buah }}
        </div>
    `
})

---

https://docs.vuejs.id/v2/guide/components-props.html