Transmissão de dados para um componente em JavaScript

É possível transmitir dados de um componente pai para um componente filho. Para isso, você deve escrever atributos com dados na tag do componente. Vamos, por exemplo, transmitir o nome e sobrenome do usuário:

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

Tais dados transmitidos são chamados de props. Para que o componente receba esses dados, é necessário listar seus nomes na configuração props:

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

Agora os dados transmitidos podem ser exibidos no template do componente filho:

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