Μεταφορά Δεδομένων σε ένα Component σε JavaScript

Από το γονικό component μπορούμε να μεταφέρουμε δεδομένα σε ένα παιδικό component. Για να γίνει αυτό, στην ετικέτα του component πρέπει να γράψουμε χαρακτηριστικά με τα δεδομένα. Για παράδειγμα, ας μεταφέρουμε το όνομα και το επώνυμό του χρήστη:

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

Τέτοια μεταφερμένα δεδομένα ονομάζονται props. Για να λάβει το component αυτά τα δεδομένα, είναι απαραίτητο να απαριθμήσουμε τα ονόματά τους στη ρύθμιση props:

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

Τώρα τα μεταφερμένα δεδομένα μπορούν να εμφανιστούν στην προβολή του παιδικού component:

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