Transmission de données à un composant en JavaScript

Depuis un composant parent, il est possible de transmettre des données à un composant enfant. Pour cela, il faut écrire des attributs avec les données dans la balise du composant. Transmettons, par exemple, le prénom et le nom de l'utilisateur :

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

Ces données transmises sont appelées props (propriétés). Pour que le composant reçoive ces données, il faut énumérer leurs noms dans l'option props :

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

Maintenant, les données transmises peuvent être affichées dans le template du composant enfant :

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