Transfer Data ke Komponen dalam JavaScript

Dari komponen induk, kita dapat mentransfer data ke komponen anak. Untuk melakukannya, pada tag komponen harus ditulis atribut dengan data. Mari kita, sebagai contoh, transfer nama depan dan nama belakang pengguna:

App.vue<template>
  <User name="john" surn="smit" />
</template>

Data yang ditransfer seperti ini disebut props. Agar komponen menerima data ini, perlu untuk mendaftarkan namanya dalam pengaturan props:

components/User.vue<script>
  export default {
    props: ['name', 'surn'],
    data() {
      return {
        
      }
    }
  }
</script>

Sekarang data yang ditransfer dapat ditampilkan dalam tampilan komponen anak:

components/User.vue<template>
  {{ name }}
  {{ surn }}
</template>