Vytváření podřízených komponent ve Vue

Komponenty uvnitř mají stejnou strukturu jako hlavní komponenta, se kterou jsme pracovali dříve. To znamená, že v souboru každé komponenty budou značky script a template.

Pojďme pro příklad vytvořit komponentu s názvem User. Umístíme její kód do odpovídajícího souboru:

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

V objektu data komponenty lze umístit nějaká data:

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

Tato data lze zobrazit v prezentaci komponenty:

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

Nyní připojme vytvořenou komponentu k hlavní komponentě. K tomu ji nejprve importujeme:

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

Zapišme její název do nastavení components:

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

V prezentaci nadřazené komponenty lze zobrazit prezentaci podřízené komponenty. K tomu je třeba napsat značku, jejíž název odpovídá názvu komponenty. Pojďme to udělat:

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