Передача данных в компонент в 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>