Andmete edastamine komponendile JavaScriptis

Vanemkomponendist saab andmeid edastada lapse komponendile. Selleks tuleb komponendi sildis kirjutada atribuudid andmetega. Edastame näiteks kasutaja ees- ja perekonnanime:

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

Selliseid edastatud andmeid nimetatakse prop-siteks. Selleks, et komponent saaks need andmed, on vaja loetleda nende nimed seadistuses props:

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

Nüüd saab edastatud andmeid kuvada lapse komponendi esitluses:

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