Dataöverföring till en komponent i JavaScript

Från en förälderkomponent kan man överföra data till en underordnad komponent. För att göra detta bör man i komponentens tagg skriva attribut med data. Låt oss till exempel överföra användarens förnamn och efternamn:

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

Sådan överförd data kallas props. För att komponenten skall ta emot denna data, måste man lista dess namn i inställningen props:

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

Nu kan den överförda datan visas i vyn för den underordnade komponenten:

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