Datenübergabe an eine Komponente in JavaScript

Aus der Elternkomponente können Daten an eine Kindkomponente übergeben werden. Dazu sollten im Komponenten-Tag Attribute mit den Daten geschrieben werden. Lassen Sie uns zum Beispiel den Vor- und Nachnamen des Benutzers übergeben:

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

Solche übergebenen Daten werden Props genannt. Damit die Komponente diese Daten erhält, müssen ihre Namen in der Einstellung props aufgelistet werden:

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

Nun können die übergebenen Daten in der Darstellung der Kindkomponente ausgegeben werden:

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