Kreiranje podređenih komponenti u Vue

Komponente unutra imaju istu strukturu kao glavna komponenta s kojom smo ranije radili. To znači da će u fajlu svake komponente biti tagovi script i template.

Hajde za primer napravimo komponentu pod nazivom User. Postavimo njen kod u odgovarajući fajl:

components/User.vue<script>
  export default {
    data() {
      return {
        
      }
    }
  }
</script>

U objektu data komponente možemo postaviti neke podatke:

components/User.vue<script>
  export default {
    data() {
      return {
        name: 'john'
      }
    }
  }
</script>

Ove podatke možemo prikazati u predstavu komponente:

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

Hajde sada da povežemo kreiranu komponentu sa glavnom komponentom. Za to prvo importujmo je:

App.vue<script>
  import User from './components/User.vue'
  
  export default {
    
  }
</script>

Zapišimo njeno ime u postavci components:

App.vue<script>
  import User from './components/User.vue'
  
  export default {
    components: {
      User
    }
  }
</script>

U predstavu roditeljske komponente možemo prikazati predstav podređene komponente. Za to treba napisati tag čije ime odgovara imenu komponente. Hajde da uradimo to:

App.vue<template>
  <User />
</template>