Ustvarjanje podrejenih komponent v Vue

Komponente imajo znotraj enako strukturo kot glavna komponenta, s katero smo delali prej. To pomeni, da bodo v datoteki vsake komponente značke script in template.

Za primer naredimo komponento z imenom User. Njeno kodo postavimo v ustrezno datoteko:

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

V objektu data komponente lahko postavimo nekatere podatke:

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

Te podatke je mogoče prikazati v predstavitvi komponente:

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

Zdaj povežimo ustvarjeno komponento z glavno komponento. Za to jo najprej uvozimo:

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

Njeno ime zapišimo v nastavitev components:

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

V predstavitvi nadrejene komponente je mogoče prikazati predstavitev podrejene komponente. Za to je treba napisati značko, katere ime ustreza imenu komponente. Naredimo to:

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