Data doorgeven aan een component in JavaScript

Vanuit een parent component kunnen data worden doorgegeven aan een child component. Hiervoor moeten attributen met data in de component tag worden geschreven. Laten we bijvoorbeeld de voornaam en achternaam van een gebruiker doorgeven:

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

Zulke doorgegeven data worden props genoemd. Om ervoor te zorgen dat een component deze data ontvangt, moeten hun namen worden opgesomd in de props configuratie:

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

Nu kunnen de doorgegeven data worden weergegeven in de template van het child component:

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