Transferencia de datos a un componente en JavaScript

Desde el componente padre se pueden transferir datos al componente hijo. Para ello, en la etiqueta del componente deben escribirse atributos con los datos. Por ejemplo, transmitamos el nombre y apellido del usuario:

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

Estos datos transferidos se denominan props. Para que el componente reciba estos datos, es necesario enumerar sus nombres en la configuración props:

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

Ahora los datos transferidos pueden mostrarse en la vista del componente hijo:

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