Penghantaran Data ke dalam Komponen dalam JavaScript

Daripada komponen induk, data boleh dihantar ke komponen anak. Untuk melakukan ini, dalam tag komponen tulis atribut dengan data. Sebagai contoh, mari kita hantar nama dan nama keluarga pengguna:

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

Data yang dihantar sedemikian dipanggil prop. Untuk komponen menerima data ini, adalah perlu untuk menyenaraikan namanya dalam tetapan props:

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

Sekarang data yang dihantar boleh dipaparkan dalam persembahan komponen anak:

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