Предаване на данни към компонент в JavaScript

От родителския компонент може да се предават данни към дъщерния компонент. За целта в тага на компонента трябва да се напишат атрибути с данни. Нека, например, предадем име и фамилия на потребител:

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

Такива предадени данни се наричат пропсове. За да може компонентът да получи тези данни, е необходимо да се изброят имената им в настройката props:

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

Сега предадените данни могат да бъдат изведени в изгледа на дъщерния компонент:

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