Tietojen välittäminen komponenttiin JavaScriptissä

Vanhempikomponentista voidaan välittää tietoja lapsikomponenttiin. Tätä varten komponenttitagissa tulee kirjoittaa attribuutit tiedoilla. Esimerkiksi välitetään käyttäjän etu- ja sukunimi:

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

Tällaisia välitettyjä tietoja kutsutaan propeiksi. Jotta komponentti saisi nämä tiedot, on lueteltava niiden nimet props-asetuksessa:

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

Nyt välitetyt tiedot voidaan näyttää lapsikomponentin esityksessä:

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