Předávání dat do komponenty v JavaScriptu

Z nadřazené komponenty lze předávat data do podřízené komponenty. K tomu je třeba v tagu komponenty napsat atributy s daty. Pojďme například předat jméno a příjmení uživatele:

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

Takto předaná data se nazývají props. Aby komponenta tato data obdržela, je nutné vyjmenovat jejich názvy v nastavení props:

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

Nyní lze předaná data zobrazit v šabloně podřízené komponenty:

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