Adatátvitel komponensbe JavaScriptben

A szülő komponensből adatokat lehet átvinni a gyermek komponensbe. Ehhez a komponens tag-ben attribútumokat kell írni az adatokkal. Például vigyük át a felhasználó keresztnevét és vezetéknevét:

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

Az ilyen átvitt adatokat nevezzük propoknak. Ahhoz, hogy a komponens megkapja ezeket az adatokat, felsorolni kell a nevüket a props beállításban:

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

Most az átvitt adatokat meg lehet jeleníteni a gyermek komponens nézetében:

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