Passing Data to a Component in JavaScript

You can pass data from a parent component to a child component. To do this, you should write attributes with data in the component tag. Let's, for example, pass the user's first and last name:

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

Such passed data is called props. In order for the component to receive this data, its names must be listed in the props setting:

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

Now the passed data can be displayed in the child component's view:

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