Przekazywanie danych do komponentu w JavaScript

Z komponentu nadrzędnego można przekazywać dane do komponentu potomnego. Aby to zrobić, w tagu komponentu należy napisać atrybuty z danymi. Przekażmy na przykład imię i nazwisko użytkownika:

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

Tak przekazane dane nazywane są propami. Aby komponent otrzymał te dane, konieczne jest wymienienie ich nazw w konfiguracji props:

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

Teraz przekazane dane można wyświetlić w widoku komponentu potomnego:

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