Oprettelse af underkomponenter i Vue

Komponenter indeholder den samme struktur som hovedkomponenten, som vi arbejdede med tidligere. Det betyder, at i filen for hver komponent vil der være tags script og template.

Lad os for eksempel lave en komponent med navnet User. Vi placerer dens kode i den tilsvarende fil:

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

I komponentens data objekt kan man placere nogle data:

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

Disse data kan vises i komponentens præsentation:

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

Lad os nu tilslutte den oprettede komponent til hovedkomponenten. For at gøre dette skal vi først importere den:

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

Lad os skrive dens navn i indstillingen components:

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

I forælderkomponentens præsentation kan man vise underkomponentens præsentation. For at gøre dette skal man skrive et tag, hvis navn svarer til komponentens navn. Lad os gøre dette:

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